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;