2022-03-24 学习记录--React-嵌套路由（旧版本和6.0版本）

小呀小萝卜儿

已于 2022-04-02 16:00:03 修改

阅读量944

点赞数 4

分类专栏：学习-React 文章标签： react.js 前端

于 2022-04-01 18:26:52 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/123730246

版权

学习-React 专栏收录该内容

37 篇文章 6 订阅

订阅专栏

一、前言

在这里插入图片描述

二级路由又称嵌套路由。

如上图所示，左边是导航栏，右边是展示区，这是第一个路由；当我们点击左边导航栏里的Home盒子时，右边的展示区里又出现导航栏（News和Message盒子），其下面又有对应的展示区，这就是第二个路由；
那为什么这就是嵌套路由呢？🤔
因为这是点击第一个路由里的导航区域后，其对应展示区又出现了第二个路由，它们之间就像套娃一样，第一个路由包裹着第二个路由。【该观点仅是个人理解，如有错误，欢迎指出哟😊~】

总结：

点击Home导航栏后，其页面又出现两个导航栏News和Message，点击它们可在两者之间切换对应内容，这就是嵌套路由。
然后旧版本和新版本写法不一样也【重要✨】
旧版本只需要父路由不开启严格模式（不加exact），其路径还是原来的样子（比如：/home）；然后去子路由里，将其路径拼成“/父路由/子路由中的其一”（比如/home/news）和“/父路由/子路由中的其二”（比如/home/message）就可以了；
但是新版本就不一样咯，新版本一直就是严格模式，不存在开不开启严格模式，它的写法就是给父路由的路径后面加个/*（比如：/home/*），表示后面还会有子路由；然后给子路由的路径写法不需要加/了，直接写成news和message就可以了。

二、旧版本写法

路由的匹配都是从最开始注册到最后注册这个流程走下去的，所以，App里的路由一定是最先注册的。

使用嵌套路由时不要开启严格模式：

1.默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2.开启严格匹配：<Route exact={true} path="/about" component={About}/>或者<Route exact path="/about" component={About}/>
3.严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

在这里插入图片描述

父路由：还是按照路由原来的写法，在嵌套路由里，父路由的写法并没有变化哟

在这里插入图片描述

子路由：其路径地址需要把父路由的地址包含进去哟，若有多个嵌套路由，那么父路由的地址就都要加进去呢

在这里插入图片描述

三、6.0版本写法

在这里插入图片描述

父路由：需要给其地址后面加个/*，表示后面还有子路由

在这里插入图片描述

子路由：V6使用路由嵌套及路由重定向方法,子路由路径不用加"/"，v6中会自动拼接

在这里插入图片描述
对应代码：

App.jsx（这里相当于上图父路由里的代码）

import React, { Component } from 'react'
import {Routes ,Route , Navigate} from 'react-router-dom'

// 引入路由组件
import Home from './pages/Home'
import About from './pages/About'

// 引入一般组件
import Header from './components/Header'
import MyNavLink from './components/MyNavLink'

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group">

              {/* 原生html中，靠a标签跳转到不同的页面 */}
              {/* <a href="./about.html" className="list-group-item"></a>
              <a href="./home.html" className="list-group-item active"></a> */}

              {/* 编写路由链接：在React中靠路由链接实现切换组件 —— Link要放在Router里面 */}
              {/* <Link className="list-group-item" to="/about">About</Link>
              <Link className="list-group-item" to="/home">Home</Link> */}
              
              {/* 编写路由链接（并实现高亮效果）：在React中靠路由链接实现切换组件 —— NavLink要放在Router里面 */}
              {/* 旧版写法 */}
              {/* <NavLink activeClassName="selected" className="list-group-item" to="/about">About</NavLink>
              <NavLink activeClassName="selected" className="list-group-item" to="/home">Home</NavLink> */}
              {/* 新版v6写法 */}
              {/* <NavLink className={({ isActive }) => "list-group-item" + (isActive ? " selected" : "")} to="/about">About</NavLink>
              <NavLink className={({ isActive }) => "list-group-item" + (isActive ? " selected" : "")} to="/home">Home</NavLink> */}

              {/* 上面写法太繁琐，所以采用封装组件的方法 */}
              <MyNavLink to="/about">About</MyNavLink>
              <MyNavLink to="/home">Home</MyNavLink>

            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">

                {/* 注册路由 —— Route要放在Routes里面,Routes要放在Router里面 */}

                  {/* 旧版写法 exact是开启严格模式 */}
                  {/*
                  <Switch>
                    <Redirect to="/about"/>
                    <Route exact path="/" component={About}/>
                    <Route path="/about" component={About}/>
                    <Route path="/home" component={Home}/> 
                  </Switch>  
                  */}
                  
                  {/* 新版写法 */}
                  <Routes>

                    {/* Redirect（重定向）：若都没匹配上，则去Redirect指向的路径 [在v6已被移除，在v6中需引入Navigate标签来替代之前Redirect的重定向操作]*/}
                    {/* 采用Navigate实现重定向，可以使url地址为'/'时，About盒子产生高亮效果 */}
                    <Route path="*" element={<Navigate to="/about"/>}/>
                    {/* 采用路由方式，不可以使url地址为'/'时，About盒子产生高亮效果 */}
                    {/* <Route path="/" element={<About />}/> */}
                    <Route path="/about" element={<About />}/>
                    {/* 若有嵌套路由，需给父路由的path后面再加个/*，为了告诉这个路由 后续会跟着其它路径 */}
                    {/*<Route path="/home" element={<Home />}/>  */}
                    <Route path="/home/*" element={<Home />}/>

                  </Routes>

              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Home/index.jsx（这里相当于上图子路由里的代码）

import React, { Component } from "react";
import { Routes, Route ,Navigate } from "react-router-dom";
import MyNavLink from "../../components/MyNavLink";
import News from "./News";
import Message from "./Message";

export default class Home extends Component {
  render() {
    return (
      <div>
        <h3>我是Home的内容</h3>
        <div>
          {/* 子路由路径不用加"/"，v6中会自动拼接 */}
          <ul className="nav nav-tabs">
            <li>
              <MyNavLink to="news">News</MyNavLink>
            </li>
            <li>
              <MyNavLink to="message">Message</MyNavLink>
            </li>
          </ul>
          {/* 注册路由 */}
          <Routes>
            {/* 首次进入Home页面是重定向到news */}
            <Route path="*" element={<Navigate to="news" />} />
            <Route path="news" element={<News />} />
            <Route path="message" element={<Message />} />
          </Routes>
        </div>
      </div>
    );
  }
}