快捷導(dǎo)航

react-router-dom?V6的配置使用實踐

更新時間：2022年05月09日 10:11:17 作者：webfunny前端監(jiān)控

本文主要介紹了react-router-dom?V6的配置使用實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近在搭建PC項目的React框架，涉及到React Router，開發(fā)同學(xué)有時就需要去嘗試點新的東西，在開發(fā)過程中才不會枯燥的，基于這個理念推動，就在搭建的時候用V6的版本開始了（雖然只是個新版本，也不算啥新東西）......

V6的版本相對于V5,做了很多的優(yōu)化，有書寫方面的、路由的嵌套、路由配置化、鑒權(quán)方面等等，下面就簡單的介紹下如何使用

一、關(guān)于書寫方面

路由注冊的時候由的Switch改為了Routes

//V5版本
 import {Route, Switch} from 'react-router-dom';
 
<div>
    <Switch>
        ......
        ......
    </Switch>
 </div>
//V6版本
 import {Route, Routes } from 'react-router-dom';
 
<div>
    <Routes >
        ......
        ......
    </Routes>
 </div>

不用Route標(biāo)簽包裹子組件，可以直接使用element屬性，并且不需要exact來表示精準(zhǔn)匹配，V6版本內(nèi)部算法改變，它默認(rèn)就是匹配完整路徑，先后順序不再重要，它能夠自動找出最優(yōu)匹配路徑

//V5版本 
import {Route, Switch} from 'react-router-dom';
 
<div>
    <Switch>
        <Route exact  path="/">
            <Home />
        </Route>
    </Switch>
 </div>
//V6的版本
import {Route, Routes } from 'react-router-dom';
 
<div>
    <Routes >
        <Route path="/" element={<Home />} />
    </Routes>
 
 </div>

將Redirect改為Navigate

//路由配置中
//V5代碼如下
import { Redirect } from 'react-router-dom';
<Redirect to="/home" />
//V6如下
import { Navigate } from 'react-router-dom';
<Route path="/" element ={<Navigate replace to="/home" />} />

//組件內(nèi)部
//V5版本
import { Redirect } from 'react-router-dom';
//重定向到首頁
return <Redirect to="/" />

//V6版本
import { Navigate } from 'react-router-dom';
//重定向到首頁
return <Navigate to="/" />

用useNavigate替代useHistory使用

import {useNavigate} from 'react-router-dom';
const navigate = useNavigate();
//如去首頁
navigate("/home");
//還可使用
navigate(-1);  //后退到前一頁
navigate(-2); //后退到前兩頁的前一頁， 
navigate(1); //前向?qū)Ш?等等依此類推

二、路由的嵌套方面優(yōu)化

使用 Outlet 組件，此組件是一個占位符，告訴 React Router 嵌套的內(nèi)容應(yīng)該放到哪里。

//路由中
<Routes>
  <Route path='/user/*'  element={<User />} 
   	    <Route path='user-item' element={<div>我是嵌套子項</div>} />
  <Route/>
</Routes>

//User組件中
import {Outlet} from 'react-router-dom';
const User = () => {
	return 
	<section>
	  <h1>我是外容器</h1>
	  <Outlet />
	</section>
}
export default User;

三、關(guān)于路由的靈活配置化

可以通過API useRoutes讀取一個路由配置數(shù)組，生成相應(yīng)的路由組件列表,來實現(xiàn)路由配置化，

并且可以在路由配置中帶 meta屬性，增加其他配置化信息，如路由圖標(biāo)，是否需要登錄等其他信息

import { useRoutes } from 'react-router-dom';
export const routes = [
    {
        path: '/',
        element: <Layout />,
        children: [
            {
                path: 'home',
                meta: {
                    title: '首頁',
                    icon: <DashboardOutlined />,
                },
                children: [
                    {
                        path: 'application',
                        element: <Application />,
                        meta: {
                            title: '應(yīng)用',
                        }
                    }
                ]
            },
            {
                path: 'setting',
                element: <Setting />,
                meta: {
                    title: '設(shè)置',
                    icon: <UserOutlined />,   //圖表名稱
                }
            }
        ]
    },
    {
        path: '/login',
        element: <Login />,
        meta: {
            title: '登錄',
            noLogin: true,
            hideMenu: true
        }
    },
    {
        path: '*',
        element: <Page404 />,
        meta: {
            title: '404',
            noLogin: true,
            hideMenu: true
        }
    },
];
const Routes = () => (
    useRoutes(routes)
)
export default Routes;

四、關(guān)于路由鑒權(quán)方面

此處就不過多的概述，只是做個簡單的登錄校驗的實例，每個項目的關(guān)于鑒權(quán)方式都不一樣，可以結(jié)合上方第三點中 meta信息去自行實現(xiàn)，

const onRouteBefore = ({ pathname, meta }) => {
  // 動態(tài)修改頁面title
  if (meta.title !== undefined) {
    document.title = meta.title
  }
  // 判斷未登錄跳轉(zhuǎn)登錄頁
  if (!meta.noLogin) {
    if (!isLogin) {
      return '/login'
    }
  }
}

到此這篇關(guān)于react-router-dom V6的配置使用實踐的文章就介紹到這了,更多相關(guān)react-router-dom V6配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: