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'functionApp(){<BrowserRouter><Routes><Route  path='/page1' element ={<Page1 />}/><Route  path='/page2' element ={<Page2 />}/><Route  path='*' element ={<Page404 /}/><Routes><BrowserRouter>}exportdefault App;

• 需要添加子路由 就继续嵌套
• 要在 <Page1 /> 组件下 放入 <Outlet /> => 【确定子路由出现的位置】

例 ： 子路由 👇

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

方案二 ：（ 推荐 ）

• 通过 react 17 之后推出的 hooks -> useRoutes
• 这个 hooks ，看起来更像 vue 的路由配置，而不是堆标签。

例 ： App.jsx 👇

import{ BrowserRouter}from"react-router-dom";import Element from'./routes'functionApp(){return(<BrowserRouter><Element /></BrowserRouter>)}exportdefault 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'functionElement(){const element =useRoutes([{path:'/page1',element:<Page1 />},{path:'/page2',element:<Page2 />},{path:'*',element:LazyLoad('/view/404')}])return(element);}exportdefault Element;

• 子路由可以通过 children 来嵌套实现

例 ： 子路由 👇

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

Ⅱ、 动态路由

动态路由的作用，就是在去该路由的同时，还能带去一定的参数 ，达到路由自定义传参的作用

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

<Routepath='/page1/:content'element= {<Page1/>} />

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

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

② 接收参数

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

import{useParams}from'react-router-dom';exportdefaultfunctionDetail(props){let{ content }=useParams();return(<div></div>)}

Ⅲ、路由重定向

方案一 ： （ 通过Navigate ）

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

方案二 ：( 自己封装 )
例 ： 封装一个组件 👇

import React,{useEffect}from'react'import{useNavigate }from'react-router-dom'exportdefaultfunctionRedirect(props){const navigate =useNavigate();useEffect(()=>{navigate(props.to,{replace:true})})returnnull}

例 ： 使用：👇

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

Ⅳ、路由跳转 (两种形式)

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

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

方案二 ： （ 方法类型 ）

import{ useNavigate }from'react-router-dom'functionIndex(){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';constLazyLoad=(path)=>{//传入在view 下的路径const Comp = React.lazy(()=>import(`../view${path}`))return(<React.Suspense fallback={<> 加载中...</>}><Comp /></React.Suspense>)}functionElement(){const element =useRoutes([{path:'/page1',element:LazyLoad('/Page1')},{path:'/page2',element:LazyLoad('/Page2')}])return(element);}exportdefault Element;

🚐 💨 华为社招渠道 👉 👉 请先阅读
🚀🚀🚀
总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁