我建议您检查 React-Router
以解决这种情况
它很容易让您创建这样的自定义路由：
import React from "react";import { BrowserRouter as Router, Route, link } from "react-router-dom";const BasicExample = () => ( <Router> <div> <ul> <li> <link to="/">Home</link> </li> <li> <link to="/about">about</link> </li> <li> <link to="/topics">Topics</link> </li> </ul> <hr /> <Route exact path="/" component={Home} /> <Route path="/about" component={about} /> <Route path="/topics" component={Topics} /> </div> </Router>);const Home = () => ( <div> <h2>Home</h2> </div>);const about = () => ( <div> <h2>about</h2> </div>);const Topics = ({ match }) => ( <div> <h2>Topics</h2> <ul> <li> <link to={`${match.url}/rendering`}>Rendering with React</link> </li> <li> <link to={`${match.url}/components`}>Components</link> </li> <li> <link to={`${match.url}/props-v-state`}>Props v. State</link> </li> </ul> <Route path={`${match.url}/:topicId`} component={Topic} /> <Route exact path={match.url} render={() => <h3>Please select a topic.</h3>} /> </div>);const Topic = ({ match }) => ( <div> <h3>{match.params.topicId}</h3> </div>);export default BasicExample;
