React动态路由配置

项目初始化

模块创建

统一导出

全局模块配置选项

核心代码

使用及效果展示

博文适用于react-router v6及以上，其中还有很多值得改进的地方

最近学习react的过程中，思考怎样实现动态路由的配置(最终实现从页面配置最终动态从数据库加载上线模块)，从最新react-router-dom官网的推荐方式

其中二级路由出口还是得在相应的模块中配置路由出口,见博文

react-router-dom v6版本，v5版本可能使用react-router-config,运行v6上不支持，主要是移除了Switch

由于没有很好的案例提供思路，不过还是从下面的博文找到解决问题的方法

学习 React 创建路由（超简单）_react添加路由_小树枝.的博客-CSDN博客

项目初始化

首先脚手架创建项目（nodejs服务本地已安装）及依赖安装

npx create-react-app xk07

npm install react-router-dom

模块创建

首先创建四个模块 ACD模块内容类似

import React from 'react'



export default function A() {

  return (

    <div>

      this is A React component

    </div>

  )

}

模块B,有子模块的情况，使用Outlet 添加路由出口

import React from 'react'

import{Outlet} from 'react-router-dom'



export default function B() {

  return (

    <div>

      this is B React component

      <Outlet></Outlet>

    </div>

  )

}

统一导出

统一导出模块xk07\src\pages\ComponentsAll.js

import A from './A/A'

import B from './B/B'

import C from './C/C'

import D from './D/D'



export  {A,B,C,D}

全局模块配置选项

配置路由 xk07\src\pages\Router.js 当然可以导出多个配置项，可能会有此场景

import { A, B, C, D } from './ComponentsAll'

const routersIndex =
    [
        {
            path: '/',
            name: 'A页面',
            components: A
        },
        {
            path: '/B',
            name: 'B页面',
            components: B,
            children: [
                {
                    path: "D",
                    name: 'D页面',
                    components: D
                }
            ]
        },
        {
            path: '/C',
            name: 'C页面',
            components: C
        }
    ]

export { routersIndex };

核心代码

升级组件 xk07\src\pages\Index.js

动态配置的实现主要是在于生成对应组件的json文件上

import { routersIndex } from './Router';


function IndexRouter() {
    const routers = []
    routersIndex.map((item) => {
        console.log(item);
        if (item.children === undefined) {
            routers.push(
                {
                    path: item.path,
                    element: <item.components />
                })
        } else {
            const rootNode = {
                path: item.path,
                element: <item.components />,
                children: []
            }
            item.children.map((child, index) => {
                rootNode.children.push(
                    {
                        path: child.path,
                        element: <child.components />
                    }
                )
            })
            routers.push(rootNode)
        }
    }

    )
    return routers

}

const routers = IndexRouter()

export { routers }

使用及效果展示

最后使用 xk07\src\App.js

import {
  createBrowserRouter,
  RouterProvider
} from 'react-router-dom'
import { routers } from './pages/Index'


function App() {
  const router = createBrowserRouter(routers);
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  )
}

export default App;

运行效果