react-router-domV6嵌套路由實現(xiàn)詳解

更新時間：2023年01月04日 15:12:04 作者：摸魚的湯姆

這篇文章主要為大家介紹了react-router-domV6嵌套路由實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

V6新特性

本片文章主要敘述react-router-dom v6版本基本使用介紹,下面開始梳理一下V6的新特性，以及嵌套路由的實現(xiàn)。

<Route>的屬性變更component/render->element

//  v5
 <Route path='/login' component={<Suspense fallback={<Loading />}><Login /></Suspense>}>
 </Route>
//  v6
  <Route path='/login' element={<Suspense fallback={<Loading />}><Login /></Suspense>}>
  </Route>

<Link/>使用變動

// 如果當前url為/home 
// V5
<Link to="page1"> -> <Link to="/page1">
// V6做法
<Link to="page1"> -> <Link to="/home/page1">

當前在 /home 我需要跳轉(zhuǎn)到/home/page1，在V5中是存在路由歧義的，但是V6已經(jīng)修復了

<Redirect/> 替換為 <Navigate/>

// v5
<Redirect to='/login'/>
// v6
<Navigate to='/login' />

<Switch/> 重命名為 <Routes/>

// v5
// Suspense 異步加載
import {Switch,Router,Route} from 'react-router-dom'
  <Router>
    <Switch>  
        <Route path='/login'>
           <Suspense fallback={<Loading />}><Login /></Suspense>
        </Route>
        <Route path='/*' >
           <Suspense fallback={<Loading />}><NotFound /></Suspense>
        </Route>
    </Switch>
    </Router>
// v6
import {Routes,Router,Route} from 'react-router-dom'
  <Router>
    <Routes>  
        <Route path='/login' element={<Suspense fallback={<Loading />}><Login /></Suspense>}>
        </Route>
        <Route path='/*' element={<Suspense fallback={<Loading />}><NotFound /></Suspense>}>
        </Route>
    </Routes>
    </Router>

V5中使用component或者render去渲染，或者被當做子組件渲染，但是在V6這些方法都已經(jīng)element被淘汰

用useNavigate代替useHistory

// v5
let history = useHistory()
history.push('/login');
history.replace('/login');
//v6
let navigate = useNavigate();
navigate('/login');
navigate('/login', {replace: true});

依賴包大小從20kb減少到8kb,整體體積減少

新鉤子useRoutes代替react-router-config

function Page() {
  let pages = useRoutes([ 
    { path: '/login', element:<Login/> },
    // 404找不到
    { path: '*', element: <NotFound /> }
  ]);
  return pages;
}

新標簽：<Outlet/>

   <Content style={{ height: '90vh' }}>
    <Outlet></Outlet>
   </Content>

<Outlet/>的出現(xiàn)幫我們節(jié)省了很多代碼邏輯避免了多個< Routes />，主要用于子組件顯示，作用類似于Vue中的router-view

V6嵌套路由實現(xiàn)

路由配置routers.js

export const routerItems  = [
      {
         path:'/',
         Component:lazy(()=>import('./views/root')),  
         redirect:'/designdraft',
         roles:[USER_ROLES.ADMIN,USER_ROLES.TEST],
         children:[
            {
               path:'designdraft',
               Component:lazy(()=>import('./views/designdraft/index')),  
               roles:[USER_ROLES.ADMIN], 
            },
            {
               path:'code',
               Component:lazy(()=>import('./views/code/index')),  
               roles:[USER_ROLES.ADMIN],
               children:[], 
            }, 
         ] 
      },
      {
          path:'/login',
          Component:lazy(()=>import('./views/login')),  
          children:[] 
       },
       {
         path:'*',
         Component:lazy(()=>import('./views/404')),  
         children:[] 
       }
]

嵌套路由組件封裝

import{ Suspense,lazy, useEffect } from 'react'; 
import {routerItems } from '../routers'; 
// 引入
import {
  HashRouter as Router,
  Routes,
  Route,
  Navigate,
} from 'react-router-dom';
// loading頁面
const Loading = () => (
  <>
     <div className='loadsvg'> 
        <div>
          loading...
        </div>
     </div> 
  </>
)
// 遞歸函數(shù)
const rotuerViews = (routerItems)=>{ 
  if(routerItems && routerItems.length){
    return routerItems.map(({path,Component,children,redirect})=>{
        return children && children.length ? (
            <Route path={path} key={path} element={<Suspense fallback={<Loading/>}><Component/></Suspense>}>
                   {rotuerViews(children)} // 遞歸遍歷子路由
                   {redirect?
                   (<Route  path={path} element={<Navigate to={redirect} />}></Route>):
                   (<Route path={path} element={<Navigate to={children[0].path} />}></Route>)
                   }
            </Route>
        ):(
          <Route   key={path} path={path} element={ <Suspense fallback={<Loading/>}><Component/></Suspense>}>
          </Route> 
        )
    })
  }
}
const PageView = () => { 
     return ( 
        <Router>
          <Routes> 
              {rotuerViews(routerItems)} 
          </Routes>
        </Router> 
     )
} 
export default PageView;

視圖顯示

class Rootpage extends React.Component {
   // 狀態(tài)型組件
   constructor(props) {
      super(props)
   }
   render() {
      //  頁面嵌套路由需要通過，遞歸路由組件，判斷是否存在redirect，進行路由重定向
      let token = sessionStorage.getItem('keys');
      return (
         <>
           <div>
             // 路由跳轉(zhuǎn)
              <NavLink to="/designdraft" state="admin">designdraft</NavLink>
              <NavLink to="/code" state="admin">code</NavLink>
           </div>
           <div>
             // 子路由視圖顯示    
             <Outlet></Outlet>
           </div>
         </>
      )
   }
}
export default Rootpage

V5版本的路由嵌套在這里不再過多敘述了，如果你用React足夠多，肯定會了解React-Router-dom-V5版本的嵌套是如何實現(xiàn)的

總結(jié)

React-Router-dom-V6版本不管是在體積上還是在功能方面都做了很大的升級，例如上面嵌套路由的寫法來看V6確實比V5明顯要好很多，畢竟代碼量上就減少了不少??，還有就是修復了NavLink的Url問題。關于新特性的內(nèi)容就講述這么多吧，還有沒提到的部分，自己可以去官方文檔了解一下

以上就是react-router-domV6嵌套路由實現(xiàn)詳解的詳細內(nèi)容，更多關于react-router-domV6嵌套路由的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

React中實現(xiàn)編輯框自動獲取焦點與失焦更新功能
在React應用中,編輯框的焦點控制和數(shù)據(jù)回填是一個常見需求,本文將介紹如何使用useRef和useEffect鉤子,在組件中實現(xiàn)輸入框自動獲取焦點及失焦后更新數(shù)據(jù)的功能,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下
2024-01-01
React Router 中實現(xiàn)嵌套路由和動態(tài)路由的示例
React Router 是一個非常強大和靈活的路由庫，它為 React 應用程序提供了豐富的導航和 URL 管理功能，能夠幫助我們構(gòu)建復雜的單頁應用和多頁應用，這篇文章主要介紹了React Router 中如何實現(xiàn)嵌套路由和動態(tài)路由,需要的朋友可以參考下
2023-05-05
React中super()和super(props)的區(qū)別小結(jié)
本文主要介紹了React中super()和super(props)的區(qū)別小結(jié),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-03-03
React引入antd-mobile+postcss搭建移動端
本文給大家分享React引入antd-mobile+postcss搭建移動端的詳細流程，文末給大家分享我的一些經(jīng)驗記錄使用antd-mobile時發(fā)現(xiàn)我之前配置的postcss失效了，防止大家踩坑，特此把解決方案分享到腳本之家平臺，需要的朋友參考下吧
2021-06-06
列表頁常見hook封裝實例
這篇文章主要為大家介紹了列表頁常見的hook封裝示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-07-07
React大文件分片上傳原理及方案
前端進行大文件分片上傳的方案幾乎都是利用Blob.prototype.slice方法對文件進行分片，用數(shù)組將每一個分片存起來，最后將分片發(fā)給后端，本文給大家介紹React大文件分片上傳方案，感興趣的朋友跟隨小編一起看看吧
2023-08-08
詳解在create-react-app使用less與antd按需加載
這篇文章主要介紹了詳解在create-react-app使用less與antd按需加載，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
react 通過后端接口實現(xiàn)路由授權的示例代碼
本文主要介紹了React應用中通過后端接口獲取路由授權,實現(xiàn)動態(tài)和靈活的權限管理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
2024-11-11
React中的useState和setState的執(zhí)行機制詳解
這篇文章主要介紹了React中的useState和setState的執(zhí)行機制,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
一篇文章教你用React實現(xiàn)菜譜系統(tǒng)
本篇文章主要介紹了React實現(xiàn)菜譜軟件的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2021-09-09