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

目录

• V6新特性
• 的属性变更component/render->element
• 使用变动
• 替换为
• 重命名为
• 用useNavigate代替useHistory
• 依赖包大小从20kb减少到8kb,整体体积减少
• 新钩子useRoutes代替react-router-config
• 新标签：
• V6嵌套路由实现
• 总结

V6新特性

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

的属性变更component/render->element

//  v5
 }>}>
 
//  v6
  }>}>
  

使用变动

// 如果当前url为/home 
// V5
 -> 
// V6做法
 -> 

当前在 /home 我需要跳转到/home/page1，在V5中是存在路由歧义的，但是V6已经修复了

替换为

// v5

// v6

重命名为

// v5
// Suspense 异步加载
import {Switch,Router,Route} from 'react-router-dom'
  
      
        
           }>
        
        
           }>
        
    
    
// v6
import {Routes,Router,Route} from 'react-router-dom'
  
      
        }>}>
        
        }>}>
        
    
    

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: },
    // 404找不到
    { path: '*', element:  }
  ]);
  return pages;
} 

新标签：

的出现帮我们节省了很多代码逻辑避免了多个< 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 = () => (
  <>
     
 
        

          loading...
        
     
 
  
)
// 递归函数
const rotuerViews = (routerItems)=>{ 
  if(routerItems && routerItems.length){
    return routerItems.map(({path,Component,children,redirect})=>{
        return children && children.length ? (
            }>}>
                   {rotuerViews(children)} // 递归遍历子路由
                   {redirect?
                   (}>):
                   (}>)
                   }
            
        ):(
          }>}>
           
        )
    })
  }
}
const PageView = () => { 
     return ( 
        
           
              {rotuerViews(routerItems)} 
          
         
     )
} 
export default PageView;

• 视图显示

class Rootpage extends React.Component {
   // 状态型组件
   constructor(props) {
      super(props)
   }
   render() {
      //  页面嵌套路由需要通过，递归路由组件，判断是否存在redirect，进行路由重定向
      let token = sessionStorage.getItem('keys');
      return (
         <>
           

             // 路由跳转
              designdraft
              code
           
           

             // 子路由视图显示    
             
           
         
      )
   }
}
export default Rootpage

• V5版本的路由嵌套在这里不再过多叙述了，如果你用React足够多，肯定会了解React-Router-dom-V5版本的嵌套是如何实现的

总结

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

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