react-router-dom v5升级到v6 并进行路由配置改造

kaqiinono

已于 2022-03-16 18:11:51 修改

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： react.js javascript 前端 reactjs react

于 2022-03-16 17:22:26 首次发布

本文链接：https://blog.youkuaiyun.com/songmeinuo/article/details/123530492

版权

v5到v6升级概括

官方文档点这里
 参考内容点这里

Switch 组件替换为 Routes 组件。
如何放置 Route 的渲染组件。
- render替换为element
路由中没有exact。
activeClassName和activeStyle不存在于NavLink组件了。
- 可以通过函数回调访问 NavLink 组件的 isActive 状态
Redirect组件替换为Navigate组件。
没有Prompt组件

目标

基于统一的路由配置进行路由加载，并进行统一逻辑处理，比如菜单渲染，页面鉴权等，同时实现组件的按需加载，当需要新增和编辑路由时，只需要修改[自定义路由配置]文件即可

自定义路由配置结构说明

path 页面路径
component 对应渲染组件
beforeEnter 渲染组件前的逻辑处理
menu 菜单属性，包括标签title和响应式布局等设置
children 嵌套子路由

注意：当存在子路由时，不要设置component属性，否则子组件可能不会被渲染

路由配置示例

route/const.js

import {
    userInfo } from '../service/common';
import CreateActivity from '../component/ActivityManage/ActivityList/CreateActivity';
import ActivityDetail from '../component/ActivityManage/ActivityList/ActivityDetail';
import ActivityPanel from '../component/ActivityManage/ActivityPanel';
import Durables from '../entry/Durables';
import ActivityManage from '../entry/ActivityManage';

const routes = [
    {
   
        path: '/',
        beforeEnter: userInfo,
        children: [
            {
   
                path: 'activity',
                children: [
                    {
   
                        path: 'list',
                        children: [
                            {
   
                                path: ':panelId',
                                component: ActivityPanel
                            },
                            {
   
                                index: true,
                                component: ActivityManage
                            },
                            {
   
                                path: 'create',
                                component: CreateActivity
                            },
                            {
   
                                path: 'edit/:activityId',
                                component: CreateActivity
                            },
                            {

最低0.47元/天解锁文章