react-router5官网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 (
    
      

        

          

            Home
          
          

            Topics
          
        

        
          
            
          
          
            
          
        
      
    
  );
}

function Home() {
  return (
    

      
Home
    
  );
}

function Topics() {
  let { path, url } = useRouteMatch();

  return (
    

      
Topics
      

        

          Rendering with React
        
        

          Components
        
        

          Props v. State
        
      

      
        
          
Please select a topic.
        
        
          
        
      
    
  );
}

function Topic() {
  let { topicId } = useParams();

  return (
    

      
{topicId}
    
  );
}

效果图：

————————————————————分割线———————————————————

相关知识：

嵌套路由：实现嵌套路由需要在一个包裹的子组件中再使用进行包裹内容即可。例如上面的 组件。

useRouteMatch( ): 不带参数的时候，返回当前组件路由匹配到的路径内容。
如果带参数，则相当于的功能，可以进行路由匹配的判断，并且不需要渲染组件。

解析：

页面由两个部分组成，ul包裹的两个link标签Home和Topics以及包裹的路由组件，其中只有一个路由会被匹配并渲染。
前两个图，是页面的主要两个组件，和 根据路由为/ 或者 /topics进行对应的渲染。
对于组件，里面又包括两个部分，

Topics

，ul包裹的三个link和
包裹的路由组件。这里面的路径必须和之前的路径进行拼接，
例如

Rendering with React

这样才可以对之前对内容进行保留。例如：
路径为：/topics/components 则会分别匹配到 渲染出并且匹配到${path}/:topicId}>渲染出。