react的路由（React 路由v6 – 超全详解）

React router v6 路由

已经习惯了 v5 版本的路由     
    
    
，那么 v6 版本的路由 该怎么应用呢？

Ⅰ    
    
    
  、路由 v6 (两种形式)

方案一 ： （ 不推荐 ）

通过标签 嵌套 标签 的形式 通过 Routes 为 包裹 Route 标签的形式

例 ： 用法 👇

import { Route,Routes,BrowserRouter } from "react-router-dom"; import Page1 from ../view/Page1 import Page2 from ../view/Page2 import Page404 from ../view/Page404 function App() { <BrowserRouter> <Routes> <Route path=/page1 element = {<Page1 />} /> <Route path=/page2 element = {<Page2 />} /> <Route path=* element = {<Page404 /} /> <Routes> <BrowserRouter> } export default App; 需要添加子路由 就继续嵌套 要在 <Page1 /> 组件下 放入 <Outlet /> => 【确定子路由出现的位置】

例 ： 子路由 👇

<Route path=/page1 element = {<Page1 />} > <Route path=/page1/test1 element = {<Test1 />} /> <Route path=/page1/test2 element = {<Test2 />} /> </Route>

方案二 ：（ 推荐 ）

通过 react 17 之后推出的 hooks -> useRoutes 这个 hooks      


     


     


  ，看起来更像 vue 的路由配置




 




 




 
，而不是堆组件的形式    
    
    
。

例 ： App.jsx 👇

import { BrowserRouter} from "react-router-dom"; import Element from ./routes function App() { return ( <BrowserRouter> <Element /> </BrowserRouter> ) } export default App;

例 ： 路由配置 /routes/index.jsx 👇

import { useRoutes } from "react-router-dom"; import Page1 from ../view/Page1 import Page2 from ../view/Page2 import Page404 from ../view/Page404 function Element() { const element = useRoutes([ { path: /page1, element: <Page1 /> }, { path: /page2, element: <Page2 /> }, { path: *, element: LazyLoad(/view/404) } ]) return (element); } export default Element; 子路由可以通过 children 来嵌套实现； 注意放子路由的地方同样要
   

   

   

，再加个 <Outlet /> 来确定子路由的位置；

例 ： 子路由 👇 （如下 <Page1/> 中要加个<Outlet />）

... { path: /page1, element: <Page1 /> children: [ { path: /page1/aaa, element: <Aaa /> }, { path: /page1/bbb, element: <Baa /> } ] } ...

Ⅱ


     


     


     
、 动态路由

动态路由的作用      

     

     

 ，就是达到路由自定义传参的作用；

① 绑定参数 方案一 ： （ 组件形式 创建的路由）

<Route path = /page1/:content element = {<Page1 />} />

方案二 ：（useRoutes 创建的路由）

... { path: /page1/:content, element: <Page1 /> }, ...

② 接收参数

接收的时候通过useParams钩子去接收

import {useParams} from react-router-dom; export default function Detail(props){ let { content } = useParams(); return( <div></div> ) }

Ⅲ
 




 




 




、路由重定向

方案一 ： （ 通过 Navigate API）

import { Navigate} from "react-router-dom"; ... { path: *, element: <Navigate to=/page404/> }, ...

方案二 ：

( 自己封装 )

例 ： 封装一个组件 👇 import React,{useEffect} from react import {useNavigate } from react-router-dom export default function Redirect(props) { const navigate = useNavigate(); useEffect(()=>{ navigate(props.to,{replace:true}) }) return null }

例 ： 使用：👇

import Redirect from ./Redirect { path: *, element: <Redirect to=/page404/> },

Ⅳ   

   

   

 、路由跳转 (两种形式)

方案二 ： （ 标签类型 ： 和上面的 路由重定向 一样 )

import {NavLink} from react-router-dom function Index() { return ( <ul> <li><NavLink to=page1> 页面1 </NavLink></li> <li><NavLink to=page1> 页面2 </NavLink></li> </ul> ) }

方案二 ： （ 方法类型 ）

import { useNavigate } from react-router-dom function Index() { return ( <ul> <li onClick={() => { useNavigate(/page1) }}>页面1</li> <li onClick={() => { useNavigate(/page2) }}>页面2</li> </ul> ) }

Ⅴ 

     

     

     、路由懒加载

1

  




  




  




、路由懒加载 




  




  




  ，对与 性能 来说是一个非常好的 优化点

;

2  


  


  


、只有在进入该路由的时候才

  


  


  


，去 按需加载

对应的     
     
     
，而不是一次性去加载全部;

3  
     
     
     、通过 React.lazy 方法来懒加载 ;

4. 同时可以通过React.Suspense 的 fallback方法 去展示 加载中 的效果 ;

例 ： 封装例子 👇 ( 同时更加简便导入 )

import { useRoutes } from "react-router-dom"; import React from react; const LazyLoad = (path) => { //传入在view 下的路径 const Comp = React.lazy(() => import(`../view${path}`)) return ( <React.Suspense fallback={<> 加载中...</>}> <Comp /> </React.Suspense> ) } function Element() { const element = useRoutes([ { path: /page1, element: LazyLoad(/Page1) }, { path: /page2, element: LazyLoad(/Page2) } ]) return (element); } export default Element;