react-router5官网demo解析3-嵌套路由

Branson
源码:

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>
  );
}
效果图:

image.png
————————————————————分割线———————————————————
image.png

相关知识:

嵌套路由:实现嵌套路由需要在一个<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 />。

阅读 52
1 声望
0 粉丝
0 条评论
你知道吗?

1 声望
0 粉丝
宣传栏