关于javascript:reactrouter官网demo解析3嵌套路由

源码：
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 />。