react-router-dom?V6的配置使用實踐
最近在搭建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標簽包裹子組件,可以直接使用element屬性,并且不需要exact來表示精準匹配,V6版本內(nèi)部算法改變,它默認就是匹配完整路徑,先后順序不再重要,它能夠自動找出最優(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屬性,增加其他配置化信息,如路由圖標,是否需要登錄等其他信息
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)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能
這篇文章主要介紹了react echarts tooltip 區(qū)域新加輸入框編輯保存數(shù)據(jù)功能,大概思路是用一個div包裹echarts, 然后在echarts的同級新建一個div用來用來模擬真實tooltip,通過鼠標移入移出事件控制真實tooltip的顯示與隱藏,需要的朋友可以參考下2023-05-05React?Context?變遷及背后實現(xiàn)原理詳解
這篇文章主要為大家介紹了React?Context?變遷及背后實現(xiàn)原理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11react項目中redux的調(diào)試工具不起作用的解決
這篇文章主要介紹了react項目中redux的調(diào)試工具不起作用的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細講解
最近在寫 React Native 項目,調(diào)試應(yīng)用時發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的,看起來很難受。研究了一下這個問題,現(xiàn)在總結(jié)一下解決方案,這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程2023-01-01Native?Memory?Tracking追蹤區(qū)域示例分析
這篇文章主要為大家介紹了Native?Memory?Tracking追蹤區(qū)域示例分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11react中通過props實現(xiàn)父子組件間通信的使用示例
在React中,父組件可以通過props屬性向子組件傳遞數(shù)據(jù),子組件可以通過props屬性接收父組件傳遞過來的數(shù)據(jù),本文就來介紹一下如何實現(xiàn),感興趣的可以了解一下2023-10-10React Native 搭建開發(fā)環(huán)境的方法步驟
本篇文章主要介紹了React Native 搭建開發(fā)環(huán)境的方法步驟,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-10-10