react中的V6路由，(包含v5路由差异对比)

v5路由：https://blog.csdn.net/kkkys_kkk/article/details/134828046?spm=1001.2014.3001.5501

目录

react-router：

v6与v5的不同点

v6路由

基本配置

1. 下载 

2.配置路由表

3.在入口文件index.js配置

Navlink的使用

路由重定向

1.使用 Navigate 组件替代

2.自定义 Redirect 组件

声明式导航与编程式导航

声明式导航

编程式导航

嵌套路由

路由表配置

视图显示

动态路由

query形式传参

声明式

编程式

params形式传参

路由表配置

声明式

编程式

state形式传参

传参

接收

路由拦截

路由拦截组件封装

配置登录拦截

路由懒加载

useRoutes钩子配置路由

---

react-router：

• 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

v6与v5的不同点

1. 组织方式：React Router v5 使用基于声明的方式来组织路由。你需要在一个 Router 组件中定义路由规则，然后使用 Route 组件来匹配不同的路径，并渲染相应的组件。React Router v6 改变了这种方式，采用了基于 hooks 的方式。你可以使用 `useRoutes` 和 `useNavigate` 等 hooks 来定义和管理路由。

2. 路由定义：在 React Router v5 中，你需要使用 `<Route>` 组件来定义路由，并使用 `path` 属性指定匹配的路径。在 React Router v6 中，你需要使用 `defineRoutes` 函数来定义路由，并使用 `path` 属性指定匹配的路径。

3. 嵌套路由：React Router v5 使用 `<Route>` 组件和嵌套路由来管理嵌套的路由结构。在 React Router v6 中，嵌套路由更加简化，你可以直接在路由配置中定义嵌套路由。

4. 动态路由：在 React Router v5 中，你可以使用冒号（:）来定义动态路由参数，如 `/users/:id`。在 React Router v6 中，你可以使用 `:param` 的形式来定义动态路由参数。

5. 重定向：React Router v5 使用 `<Redirect>` 组件来重定向到其他路径。在 React Router v6 中，你可以使用 `navigate` 函数来进行重定向。

6. 懒加载：在 React Router v5 中，你可以使用 React.lazy 和 Suspense 组件来实现路由组件的懒加载。在 React Router v6 中，你可以使用 `loadable` 函数实现路由组件的懒加载。

7. 导航方式：React Router v5 使用 `<Link>` 组件来进行导航，这会触发整个 React 组件重新渲染。在 React Router v6 中，你可以使用 `useNavigate` 钩子函数和 `<Link>` 组件来进行导航，但是它不会触发整个组件重新渲染，这会提高应用的性能。

8. 路由状态：React Router v5 中，路由状态是被持久化在 URL 地址和浏览器历史中的。在 React Router v6 中，路由状态可以在应用程序的任何地方被存储和访问，例如 Redux 状态库、React context 等。

需要注意的是，React Router v6 还处于 beta 阶段，可能存在一些变动。建议在使用前查看官方文档以获取最新信息。

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

v6路由

基本配置

1. 下载 

npm i react-router-dom

2.配置路由表

我们新建一个router文件夹，用来存放我们的路由文件，这里新建index.js文件，配置路由表

*path：是路由地址

*element：将页面作为标签显示，注意要大写

import React from 'react'
//引入createBrowserRouter
import {createBrowserRouter} from "react-router-dom"
//导入我们新建的页面，注意导出时要大写
import Home from '../components/Home'

//声明router作为路由表
const router = createBrowserRouter([
    {
        path:'/home',
        element:<Home></Home>
    }
])

//导出路由表
export default router

3.在入口文件index.js配置

import {RouterProvider}  from "react-router-dom"//引入RouterProvider
import router  from "./router" //引入我们创建的路由表

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
//将我们引入的RouterProvider作为标签使用，其中包含的属性router指向我们导入的路由表
    <RouterProvider router={router} ></RouterProvider>
    {/* <App /> */}  //app页面我们如果不用可以直接注销
  </React.StrictMode>
);

Navlink的使用

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

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

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

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

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

export default function App () {
  return (
    <div>
//通过三元判断isActive来确定样式名
       <NavLink to="/home" className={({isActive})=>isActive?"myactive":''}>
        首页</NavLink>
       <NavLink to="/new" className={({isActive})=>isActive?"myactive":''}>
        新闻</NavLink>

    </div>
  )
}

路由重定向

1.使用 Navigate 组件替代

（ 在 react-routerv6 版本中已经没有 Redirect 组件了 ）

初次访问我们将页面跳转到home页面

 {
        path:'/',
        element:<Navigate to='/home'></Navigate>
    },

2.自定义 Redirect 组件

// Redirect.js
import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
export default function Redirect(props) {
const navigate = useNavigate()
useEffect(() => {
// replace: true代表要替换掉之前的页面
navigate(props.to, { replace: true })
})
return null;
}

 {
        path:'/',
        element:<Redirect to="/home" />
    },

声明式导航与编程式导航

声明式导航

<NavLink to="/home" >首页</NavLink>
<NavLink to="/new">新闻</NavLink>

编程式导航

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

export default function Home() {
// 引入useNavigate钩子函数
const navigate = useNavigate();
return (
    <div>
        <div>Home</div>
        <button onClick={ () => navigate('/course') }>去课程页</button>
    </div>
    )
}

嵌套路由

路由表配置

在路由表中引入children属性

*需要嵌套路由时，要把父级路由写完整，匹配到父级路由

const router=createBrowserRouter([
    {    //一级路由
        path:"/home",
        element:<Home></Home>,
        children:[
            {        //二级路由
                path:"/home/center",
                element:<Center></Center>,
                children:[  //三级路由
                    {path:"/home/center/one", element:<One></One>},
                    {path:"/home/center/two", element:<Two></Two>}
                ]
            },
            {    //二级路由
                path:"/",
                element:<Navigate to="/home"></Navigate>,
            }
        ]
    },
    
])

视图显示

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

将Outlet放在需要视图显示的位置

export default function Home() {
// 引入useNavigate钩子函数
const navigate = useNavigate();
return (
    <div>
        <div>center</div>
        <button onClick={ () => navigate('/center') }>去课程页</button>

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

动态路由

query形式传参

通过设定值，修改URL路径进行传参，参数值会显示在URL路径中

声明式

<NavLink to="/news?id=1">军事新闻</NavLink>
<NavLink to="/news?id=2">体育新闻</NavLink>
<NavLink to="/news?id=3">娱乐新闻</NavLink>

编程式

• 传参

在这里我们引用拼接字符串的方法，动态传入参数

<button
    onClick={() => {
    //num为我们动态传入的变量
      navigate(`/new/?id=${num}`)
    }}
  >
    进入新页面
  </button>

• 接收参数

使用useSearchParams （）函数来接收

searchParams.get('id') ：获取路由参数的值

searchParams.has('id') ：判断参数是否存在

setSearchParams({ 'id' : 45}) ：在当前页面修改路由参数的值

// components/News.js
import React from 'react'
import { useSearchParams } from 'react-router-dom'
export default function News() {
// 通过useSearchParams钩子函数来获取query形式的参数
const [searchParams, setSearchParams] = useSearchParams()
return (
<div>News{ searchParams.get('id') }</div>
)
}

params形式传参

路由表配置

*路由形式要更改为占位符的格式

 {
       path:"/new/:id",
       element:<New></New>
  },

声明式

<NavLink to="/news/1">军事新闻</NavLink>
<NavLink to="/news/2">体育新闻</NavLink>

编程式

• 传参

同样，我们也是用拼接字符串的方法

<button
    onClick={() => {
    //num为我们动态传入的变量
      navigate(`/new/${num}`)
    }}
  >
    进入新页面
  </button>

• 接受参数

使用useParams（）函数来接收

import React from 'react'
import { useParams } from 'react-router-dom'
export default function News() {
// 通过useParams来接收params方式传递过来的参数
    const params = useParams()
    return (
    <div>News{ params.id }</div>
    )
}

state形式传参

传参

 <NavLink to={{pathname:"/new/1",state:{name:"111"}}}>页面一</NavLink>

接收

使用useLocation（）函数

import React from 'react'
import { useLocation} from 'react-router-dom'
export default function News() {
// 通过useLocation来接收params方式传递过来的参数
    const num = useLocation()
    return (
    <div>News{ num.state }</div>
    )
}

路由拦截

路由拦截组件封装

import React from 'react'
import Redirect from './Redirect'

const Isloginn=(props)=>{ 
    //声明变量接收，并作为标签在路由表中引用
    const Comp  = props.children.type
    if(sessionStorage.getItem("token")){
        return <Comp></Comp>
    }else{
      return <Navigate to="/login"></Navigate>
    }

}

配置登录拦截

import React from 'react'
import {createBrowserRouter} from "react-router-dom"
import Loginfrom "../components/Login"

const router=createBrowserRouter([
    {
        path:"/login",
        element:<Isloginn><Login></Login></Isloginn>,
    }
])

export default router

路由懒加载

(和V5一样,使用React.lazy()函数方法)

import React, { Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'
// 通过React.lazy函数配合import函数实现按需导入模块
const Home = React.lazy(() => import('../components/Home'))

export default function MRouter() {
return (
// 使用Suspense组件包裹所有路由表
<Suspense>
<Routes>
<Route path="/home" element={ <Home /> } /></Route>
</Routes>
</Suspense>
)
} 

useRoutes钩子配置路由

// LazyLoad.js
import React from 'react'
export default function LazyLoad({path}) {
    const Element = React.lazy(() => import(path))
    return (
    <React.Suspense>
        <Element />
    </React.Suspense>
)
}