脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react-router-domV6嵌套路由

react-router-domV6嵌套路由实现详解

 更新时间：2023年01月04日 15:12:04   作者：摸鱼的汤姆  
这篇文章主要为大家介绍了react-router-domV6嵌套路由实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

V6新特性

本片文章主要叙述react-router-dom v6版本基本使用介绍,下面开始梳理一下V6的新特性，以及嵌套路由的实现。

<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 我需要跳转到/home/page1，在V5中是存在路由歧义的，但是V6已经修复了

<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这些方法都已经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/>的出现帮我们节省了很多代码逻辑避免了多个< Routes />，主要用于子组件显示，作用类似于Vue中的router-view

V6嵌套路由实现

  • 路由配置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> 
  </>
)
// 递归函数
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 {
   // 状态型组件
   constructor(props) {
      super(props)
   }
   render() {
      //  页面嵌套路由需要通过，递归路由组件，判断是否存在redirect，进行路由重定向
      let token = sessionStorage.getItem('keys');
      return (
         <>
           <div>
             // 路由跳转
              <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版本的嵌套是如何实现的

总结

React-Router-dom-V6版本不管是在体积上还是在功能方面都做了很大的升级，例如上面嵌套路由的写法来看V6确实比V5明显要好很多，毕竟代码量上就减少了不少😂，还有就是修复了NavLink的Url问题。关于新特性的内容就讲述这么多吧，还有没提到的部分，自己可以去官方文档了解一下

以上就是react-router-domV6嵌套路由实现详解的详细内容，更多关于react-router-domV6嵌套路由的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react diff算法源码解析

    react diff算法源码解析

    这篇文章主要介绍了react diff算法源码解析的相关资料，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下
    2021-04-04
  • React hooks异步操作踩坑记录

    React hooks异步操作踩坑记录

    这篇文章主要介绍了React hooks异步操作踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React UI组件库之快速实现antd的按需引入和自定义主题

    React UI组件库之快速实现antd的按需引入和自定义主题

    react入门学习告一段路,下面这篇文章主要给大家介绍了关于React UI组件库之快速实现antd的按需引入和自定义主题的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • React和Vue组件更新的实现及区别

    React和Vue组件更新的实现及区别

    React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式,本文将从React和Vue的组件更新原理入手,剖析两者虚拟DOM difer算法的异同点,具有一定的参考价值,感兴趣的可以了解一下
    2024-02-02
  • 前端面试题必会之前端react面试题

    前端面试题必会之前端react面试题

    在前端面试过程中经常会问到一些面试题，今天小编抽空给大家讲解前端面试题之必会react面试题,需要的朋友可以参考下
    2023-03-03
  • 深入研究React中setState源码

    深入研究React中setState源码

    这篇文章主要介绍了深入研究React中setState源码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • react中代码块输出,代码高亮显示,带行号,能复制的问题

    react中代码块输出,代码高亮显示,带行号,能复制的问题

    这篇文章主要介绍了react中代码块输出，代码高亮显示，带行号，能复制的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • React实现Vue的watch监听属性方式

    React实现Vue的watch监听属性方式

    这篇文章主要介绍了React实现Vue的watch监听属性方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • webpack3+React 的配置全解

    webpack3+React 的配置全解

    本篇文章主要介绍了webpack3+React 的配置全解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • react-native-video实现视频全屏播放的方法

    react-native-video实现视频全屏播放的方法

    这篇文章主要介绍了react-native-video实现视频全屏播放的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03

最新评论