react中函数组件使用v6路由

在react中要是用react-router路由进行页面的跳转分为v5路由和v6路由

在有状态的组件也叫class类组件中大多数使用v5路由，而在无状态的组件也叫函数组件大多数是用v6路由，而现在市面上主流都是用的函数组件也就是v6路由。

这期咱们来讲一下函数组件中的v6路由的配置以及使用

1. React Router(V6)简介

react-router ： 核心模块 ，包含 React 路由大部分的核心功能，包括路由匹配算法和大部分核心组

件和钩子

react-router-dom ： React 应用中用于路由的软件包，包括 react-router 的所有内容，并添加了一

些特定于 DOM 的 API ，包括但不限于 BrowserRouter 、 HashRouter 和 Link

react-router-native ：用于开发 React Native 应用，包括 react-router 的所有内容，并添加了一些

特定于 React Native 的 API ，包括但不限于 NativeRouter 和 Link

2. react-routerV6 版本和 V5 版本的不同

包大小的不同。 V5 版本的大小在 20.8kb 左右，压缩后在 7.3kb 左右； V6 版本在 10.8kb 左右 , 压缩后

在 3.8kb 左右

Route 特性变更

path ：与当前页面对应的 URL 匹配

element ：新增，用于决定路由匹配时，渲染哪个组件。替代 v5 的 component 和 render

Routes 替代了 Switch

让嵌套路由更简单

useNavigate 替代 useHistory

移除了的 activeClassName 和 activeStyle

钩子 useRoutes 替代 react - router - config

了解更多请看官网： https://github.com/remix-run/react-router

3.配置路由的准备工作

首先要下载v6路由（v6路由下载无序指定版本号）

npm i react-router-dom

首先在index.js入口文件中

1.导入RouterProvider

import { RouterProvider } from 'react-router-dom';

2.使用封装好的路由文件  router文件夹中的index.js就是路由的分装

import router from './router';

3.将组件中原有的app替换

 <RouterProvider router={router} />

自己在根目录src下创建router文件夹下面新建index.js

4.导入路由模式，重定向

import { createBrowserRouter, Navigate } from 'react-router-dom'

// 5.导入需要切换的路由组件

// import Login from '../component/Login'

// import Home from '../component/Home'

    // {

    //   path:"要跳转的路径",

    //   element:<要跳转的组件/>

    // },

代码参考以下

二级路由就是想在哪个路由下设置就在他下面设置children属性

在这里message，work，my，home都是属于app的子路由

这样就完成了一个v6路由的基本配置工作，可以手动在导航栏中输入路由进行页面的跳转

4.声明式导航与编程式导航

v6路由分为声明式导航和编程式导航

声明式导航

NavLink 组件会自动给当前的匹配到的路由 NavLink 添加一个 class 名为 active , 所以想要实

现高亮效果只需要设置 class 名为 active 的样式即可

还有一种自定义class名

NavLink 有一个属性为 className ，它接收一个函数，该函数的参数是一个对象，里面有一

个属性叫做 isActive ，我们可以根据这个属性的值是否为 true 来判断是否添加 class 名

说完声明式的导航再说编程式导航

导入useNavigate钩子函数

import { useNavigate } from 'react-router-dom'

使用 useNavigate 这个钩子函数可以让我们通过 js 的方式更加灵活的实现路由跳

转

通过 Outlet 组件实现嵌套路由的视图显示

5.动态路由

话不多说看图

query 形式传参

params形式传参

7.路由拦截（也叫路由前置守卫）

配置一个路由守卫来判断是否登录存在token值，如果存在就跳转到登录页

用配置好的路由来包裹要守卫的界面

8.路由懒加载

在入口index.js文件中用Suspense包裹路由表

需要注意的是要是用路由懒加载导入都得需要用懒加载导入

浏览器访问时候要切换成低速3g才能确保效果实现

不能既用普通的import导入又用懒加载导入这样会导致报错

如有不足，敬请指出！！！

今天就是我要讲的关于函数组件中v6路由的的讲解

下期继续更新关于react的知识，想看哪一块，在评论区地下说，我会尽量去做！！