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問題。關(guān)于新特性的內(nèi)容就講述這么多吧，還有沒提到的部分，自己可以去官方文檔了解一下

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

您可能感興趣的文章: