当前位置：首页 > news >正文

React 路由v6 - 超全详解

news 来源：原创 2024/11/16 19:53:03

React router v6 路由

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

文章目录

- - React router v6 路由
  - Ⅰ、路由 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 来嵌套实现

例： 子路由 👇

...
{
    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 ）

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;