源码：
example.js
import React from "react";import { BrowserRouter as Router, Switch, Route, Link, useParams, useRouteMatch} from "react-router-dom";export default function NestingExample() { return ( <Router> <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/topics">Topics</Link> </li> </ul> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/topics"> <Topics /> </Route> </Switch> </div> </Router> );}function Home() { return ( <div> <h2>Home</h2> </div> );}function Topics() { let { path, url } = useRouteMatch(); return ( <div> <h2>Topics</h2> <ul> <li> <Link to={`${url}/rendering`}>Rendering with React</Link> </li> <li> <Link to={`${url}/components`}>Components</Link> </li> <li> <Link to={`${url}/props-v-state`}>Props v. State</Link> </li> </ul> <Switch> <Route exact path={path}> <h3>Please select a topic.</h3> </Route> <Route path={`${path}/:topicId`}> <Topic /> </Route> </Switch> </div> );}function Topic() { let { topicId } = useParams(); return ( <div> <h3>{topicId}</h3> </div> );}效果图：
————————————————————分割线———————————————————
相干常识：
嵌套路由：实现嵌套路由须要在一个<Route></Route>包裹的子组件中再应用<Route></Route>进行包裹内容即可。例如下面的 <Topics />组件。
useRouteMatch( ): 不带参数的时候，返回以后组件路由匹配到的门路内容。
如果带参数，则相当于<Route></Route>的性能，能够进行路由匹配的判断，并且不须要渲染<Route>组件。
解析：
页面由两个局部组成，ul包裹的两个link标签Home和Topics以及<Switch>包裹的路由组件，其中只有一个路由会被匹配并渲染。
前两个图，是页面的次要两个组件，<Home />和 <Topics />依据路由为/ 或者 /topics进行对应的渲染。
对于<Topics />组件，外面又包含两个局部，<h2>Topics</h2>，ul包裹的三个link和
<Switch>包裹的路由组件。这外面的门路必须和之前的门路进行拼接，
例如
<Link to={`${url}/rendering`}>Rendering with React</Link><Route path={`${path}/:topicId`}>这样才能够对之前对内容进行保留。例如：
门路为：/topics/components 则会别离匹配到<Route path="/topics"> 渲染出<Topics />并且匹配到<Route path={${path}/:topicId}>渲染出<Topic />。