您现在的位置是:首页 >其他 >React动态路由配置网站首页其他
React动态路由配置
简介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>
)
}
统一导出
统一导出模块xk07srcpagesComponentsAll.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}
全局模块配置选项
配置路由 xk07srcpagesRouter.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 };
核心代码
升级组件 xk07srcpagesIndex.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 }
使用及效果展示
最后使用 xk07srcApp.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;
运行效果
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。