最近开始接触react,很多api不了解,不清楚,一步一踩坑,记录下路由设置。
- 首先路由肯定是要动态加载的
- 其次路由需要和菜单联动
- 最后路由需要做权限管理
设计菜单数据结构
数据结构需要和后端同学一起设置方便你我他
interface MenuItem {
icon: string | null //菜单图标
keepAlive: string //当前菜单是否缓存
key: string | number //
order?: number //排序
parentKey: number | null //上级菜单key
path: string // 路由path
name:string// 路由名称
component:string// 页面路径
title: string // 菜单名称
children?: MenuList //子集
parentPath?: string //父级路由
show?: boolean | string //是否显示菜单
[key: string]: any
}
设计思路
- 定义菜单管理,按照上面菜单结构设置菜单,做增删改查
- 定义菜单和路由的映射
a. 当启动项目时,先在路由页面调用接口获取菜单数据,这里我是存放到了store中,react中路由的数据结构和上述定义的数据结构有些差别,需要过滤一下数据。
b.在layout组件中,从store中获取菜单信息 - 路由动态加载
let menu = [{
title: '列表页',
path: '/list', //路由path
key: 9,
parentKey: null,
icon: 'icon_list',
keepAlive: 'false',
order: 1,
name: 'list', //路由name
component: 'pages/list/index.tsx',
children:[{
title: '查询列表',
path: '/list/search',
key: 11,
parentKey: 9,
icon: null,
keepAlive: 'false',
order: 9588,
name: 'search',
component: 'pages/list/search/index.tsx'
}]
}];
//定义过滤路由的函数
const routeRender = (menuList) => {
const routes = menuList.map((menuItem: MenuItem) => {
//动态加载组件
const Comp = require('@/' + menuItem.component).default
if (menuItem.children) {
return {
path: menuItem.path,
element: <Comp />,
children: routeRender(menuItem.children)
}
} else {
return {
path: menuItem.path,
element: <Comp />
}
}
})
return item
}
const Router =()=>{
return useRoutes(routes)
}
权限管理
没搞到,后续更新