示例:基本路由
在这个例子中,我们有3个'Page'组件处理<Router>
。
注意:而不是<a href="/">
我们使用<Link to="/">
。
示例:嵌套路由
此示例显示嵌套路由的工作原理。该路由/topics
加载Topics
组件,该组件<Route>
有条件地在路径上呈现任何:id
值。
import React from "react"; import { BrowserRouter as Router, Route, Link } from "react-router-dom"; function BasicExample() { return ( <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> ); } function Home() { return ( <div> <h2>Home</h2> </div> ); } function About() { return ( <div> <h2>About</h2> </div> ); } function Topics({ match }) { return ( <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.path}/:topicId`} component={Topic} /> <Route exact path={match.path} render={() => <h3>Please select a topic.</h3>} /> </div> ); } function Topic({ match }) { return ( <div> <h3>{match.params.topicId}</h3> </div> ); } export default BasicExample;
转载自https://reacttraining.com/react-router/web/example/basic