raect中嵌套路由的使用(多级路由)

一、介绍

在 React 中，嵌套路由是指在一个组件内部包含多个子组件，每个子组件对应一个子路由。这种方式可以让我们更加灵活地组织页面结构，并且可以方便地实现页面的嵌套和切换。

在 React Router 中，我们可以使用 组件的 render 属性或 component 属性来渲染子组件，并通过 path 属性来匹配路由。其语法如下：

在使用嵌套路由时，我们可以将一些共用的组件定义在父组件中，然后在子组件中通过 props.children 来引用。该方法可以使代码更加简洁，也更容易理解和调试。

二、使用

在渲染App组件时记得用 BrowserRouter 标签包裹，不知道为什么的请看：react中路由的基本使用

 <BrowserRouter>
     <App/>
    </BrowserRouter>
)

在App,jsx里面注册父路由
这里的 MyNavLink 是自己封装的NavLink,使用NavLink一样的。

   <MyNavLink to="/about" >About</MyNavLink>
   <MyNavLink to="/home" >Home</MyNavLink>
   
	<Switch>
        <Route path='/about' component={
    
    About} />
        <Route path='/home' component={
    
    Home} />
	</Switch>

在Home组件里面注册子路由

<MyNavLink to="/home/news">News</MyNavLink>
<MyNavLink to="/home/message">Message</MyNavLink>

 {
    
    /* 
              注册子路由时要带上父路由的 path
              路由匹配是按照注册顺序匹配的
    */}
            <Route path="/home/news" component={
    
    News} />
            <Route path="/home/message" component={
    
    Message} />

注意： 注册子路由时要带上父路由的 path ，因为 路由匹配是按照注册顺序匹配的
个人博客：余生的学习笔记