定制开发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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

例 ： 子路由 👇

<Route  path='/page1' element = {<Page1 />} >	<Route  path='/page1/test1' element = {<Test1 />} />	<Route  path='/page1/test2' element = {<Test2 />} /></Route>
1
2
3
4

方案二 ：（ 推荐 ）

• 通过 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;
1
2
3
4
5
6
7
8
9
10

例 ： 路由配置 /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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

例 ： 子路由 👇

...{    path: '/page1',    element: <Page1 />    children: [    	{    	    path: '/page1/aaa',            element: <Aaa />    	},    	{    	    path: '/page1/bbb',            element: <Baa />    	}    ]}...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---

Ⅱ、

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

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

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

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

...{	path: '/page1/:content',    element: <Page1 />},...
1
2
3
4
5
6

② 接收参数

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

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

---

Ⅲ、

方案一 ： （ 通过Navigate ）

import { Navigate} from "react-router-dom";...{    path: '*',    element: <Navigate to='/page404'/>},...
1
2
3
4
5
6
7

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

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}
1
2
3
4
5
6
7
8
9

例 ： 使用：👇

import Redirect from './Redirect'{    path: '*',    element: <Redirect to='/page404'/>},
1
2
3
4
5

---

Ⅳ、 (两种形式)

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

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>	)}
1
2
3
4
5
6
7
8
9

方案二 ： （ 方法类型 ）

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
4
5
6
7
8
9

---

Ⅴ、路由懒加载

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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