脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 Native自定义组件与输出方法详解

    React Native自定义组件与输出方法详解

    这篇文章主要给大家介绍了关于React Native自定义组件与输出方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • 每天一个hooks学习之useUpdateEffect

    每天一个hooks学习之useUpdateEffect

    这篇文章主要为大家介绍了每天一个hooks学习之useUpdateEffect使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • 使用React-Router时出现的错误及解决

    使用React-Router时出现的错误及解决

    这篇文章主要介绍了使用React-Router时出现的错误及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React组件的用法概述

    React组件的用法概述

    React组件用来实现局部功能效果的代码和资源的集合(html/css/js/image等等)，这篇文章主要介绍了React组件的用法和理解,需要的朋友可以参考下
    2023-02-02
  • 浅谈react 同构之样式直出

    浅谈react 同构之样式直出

    这篇文章主要介绍了浅谈react 同构之样式直出,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 30分钟精通React今年最劲爆的新特性——React Hooks

    30分钟精通React今年最劲爆的新特性——React Hooks

    这篇文章主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • react native带索引的城市列表组件的实例代码

    react native带索引的城市列表组件的实例代码

    本篇文章主要介绍了react-native城市列表组件的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 采用React编写小程序的Remax框架的编译流程解析(推荐)

    采用React编写小程序的Remax框架的编译流程解析(推荐)

    这篇文章主要介绍了采用React编写小程序的Remax框架的编译流程解析(推荐),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-04-04
  • React Router 中实现嵌套路由和动态路由的示例

    React Router 中实现嵌套路由和动态路由的示例

    React Router 是一个非常强大和灵活的路由库，它为 React 应用程序提供了丰富的导航和 URL 管理功能，能够帮助我们构建复杂的单页应用和多页应用，这篇文章主要介绍了React Router 中如何实现嵌套路由和动态路由,需要的朋友可以参考下
    2023-05-05
  • React Hooks项目实战

    React Hooks项目实战

    React Hooks是React 16.8版本引入的新特性,它使得在函数组件中也能够使用状态（state）和其他React特性,本文就来详细介绍一下React Hooks项目实战,感兴趣的可以了解一下
    2023-11-11

最新评论