【React Router 6 快速上手一】重定向Navigate / useRoutes路由表 / 嵌套路由Outlet

前言

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 之前学习了react-router-dom5版本的相关内容 参考文章👉🏻React路由（详解版）和 路由的模糊匹配，重定向以及嵌套路由 今天来学习react-router-dom6版本的相关知识！ 感兴趣的小伙伴一起来看看吧~🤞

概述

React Router 以三个不同的包发布到 npm 上，它们分别为：

1. react-router: 路由的核心库，提供了很多的：组件、钩子。
2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 等 。
3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:等。

与React Router 5.x 版本相比，改变了什么？

1. 内置组件的变化：移除 ，新增 等。
2. 语法的变化：component={About} 变为 element={}等。
3. 新增多个hook：useParams、useNavigate、useMatch等。
4. 官方明确推荐函数式组件了！！！ …

1. 一级路由Routes

1. 说明： 用于包裹整个应用，v6版本中，依然需要用标签将App组件包裹起来。
2. 示例代码：

import React from 'react';
import ReactDOM from 'react-dom/client'
import App from './App'
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
  
    
      
    
  
)

1. 说明：作用与一样，但修改的是地址栏的hash值。
2. 备注：6.x版本中、 的用法与 5.x 相同。

基本使用

这里还是以之前学过的react-router-dom@5的案例来分析。

App.jsx

import React from 'react'
import { NavLink, Routes, Route } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'

export default function App() {
  return (
    
      
        
          
            React Router Demo
          
        
      
      
        
          
            {/* 路由链接 */}
            About
            Home
          
        
        
          
            
              {/* 注册路由 */}
              
                
                
              
            
          
        
      
    
  )
}

与

1. v6版本中移出了先前的，引入了新的替代者：。
2. 和v5版本的Switch一样，如果匹配上了，往下就不会再匹配了。
3. 和 要配合使用，且必须要用包裹。
4. 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
5. 属性用于指定：匹配时是否区分大小写（默认为 false）。
6. 当URL发生变化时， 都会查看其所有子 元素以找到最佳匹配并呈现组件 。
7. 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。

2. 重定向Navigate

在v5版本中，路由的重定向使用的是Redirect，在v6版本中使用的是Navigate。

v5版本的写法:
import { Redirect } from 'react-router-dom'


v6版本的写法:
import { Navigate } from 'react-router-dom'

作用

只要组件被渲染，就会修改路径，切换视图。

Navigate会接收两个属性: to 和 replace

replace属性用于控制跳转模式（push 或 replace，默认是push）。

路由的跳转有两种模式，push和replace，push模式会将这个url压入路由history栈顶； 而replace模式会将栈顶的url替换 。

Navigate组件可以设置replace的值为true或false，默认值为false，所以默认为push跳转。

3. NavLink高亮

在v5版本中，实现NavLink高亮使用的是NavLink组件标签中的activeClassName属性，当你点击NavLink标签时，加哪个样式的类名。

About
Home

在v6版本中，想要实现自定义的类名，需要把className的值写成一个函数。

//高亮样式

    .demo {
      background-color: orange !important;
      color: white !important;
    }

 
{ return isActive ? 'list-group-item demo' : 'list-group-item' }} to="/about">
About


/*
	默认情况下，当Home的子组件匹配成功，Home的导航也会高亮，
	当NavLink上添加了end属性后，若Home的子组件匹配成功，则Home的导航没有高亮效果。
*/
home

代码优化实现复用

将ClassName的值封装成一个函数

function computedClassName({ isActive }) {
  return isActive ? 'list-group-item demo' : 'list-group-item'
}
...
About

4. useRoutes()路由表 作用

根据路由表，动态创建和。

在src下新建一个routes文件夹，专门用于维护路由表，应用中的路由都存放在路由表中。

src/routes/index.js

import About from '../pages/About'
import Home from '../pages/Home';
import { Navigate } from 'react-router-dom';

export default [
  // 路由表
  {
    path: '/about',
    element: 
  },
  {
    path: '/home',
    element: 
  },
  {
    path: '/',
    element: 
  }
]

App.jsx

import React from 'react'
import { NavLink, useRoutes } from 'react-router-dom'
import routes from './routes/index';

export default function App() {
  
  // useRoutes可以用路由表生成...结构
  // 根据路由表生成对应的路由规则
  const element = useRoutes(routes)
 
  return (
    
      
        
          
            React Router Demo
          
        
      
      
        
          
            {/* 路由链接 */}
            About
            Home
          
        
        
          
            
              {/* 注册路由 */}
              {element}
            
          
        
      
    
  )
}

5. 嵌套路由Outlet 作用

当产生嵌套时，渲染其对应的后续子路由 (类似于vue中 < < )

如图，News组件和Message组件是Home的子组件

将二级路由放在children属性中注册:

...
{
    path: '/home',
    element: ,
    children: [
      {
        path: 'news',
        element: 
      },
      {
        path: 'message',
        element: 
      }
    ]
  },
...

Home.jsx

import React from 'react'
import { NavLink, Outlet } from 'react-router-dom';

export default function Home() {
  return (
    
      Home组件内容
      
        
          
            News
          
          
            Message
          
        
        {/* 指定路由组件呈现的位置 */}
        
      
    
  )
}

< < News < < 中的to属性有三种写法：

1. to=‘news’
2. to=‘./news’
3. to=‘/home/news’ //这一种与v5版本中一样

今天的分享就到这里啦✨ \textcolor{red}{今天的分享就到这里啦✨} 今天的分享就到这里啦✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下 🤞 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！ ⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！ ✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！