日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：webfunny前端監控 ? 更新時間： 2022-07-01 編程語言

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

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

一、關于書寫方面

路由注冊的時候由的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標簽包裹子組件，可以直接使用element屬性，并且不需要exact來表示精準匹配，V6版本內部算法改變，它默認就是匹配完整路徑，先后順序不再重要，它能夠自動找出最優匹配路徑

//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" />} />

//組件內部
//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); //前向導航 等等依此類推

二、路由的嵌套方面優化

使用?Outlet?組件，此組件是一個占位符，告訴 React Router 嵌套的內容應該放到哪里。

//路由中
<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;

三、關于路由的靈活配置化

可以通過API?useRoutes讀取一個路由配置數組，生成相應的路由組件列表,來實現路由配置化，

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

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: '應用',
                        }
                    }
                ]
            },
            {
                path: 'setting',
                element: <Setting />,
                meta: {
                    title: '設置',
                    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;

四、關于路由鑒權方面

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

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

原文鏈接：https://juejin.cn/post/7095293981713498149

欄目分類
最近更新