记录react项目中的动态路由设置

最近开始接触react,很多api不了解，不清楚，一步一踩坑，记录下路由设置。

1. 首先路由肯定是要动态加载的
2. 其次路由需要和菜单联动
3. 最后路由需要做权限管理

设计菜单数据结构

数据结构需要和后端同学一起设置方便你我他

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
}

设计思路

1. 定义菜单管理，按照上面菜单结构设置菜单，做增删改查
2. 定义菜单和路由的映射
   a. 当启动项目时，先在路由页面调用接口获取菜单数据，这里我是存放到了store中，react中路由的数据结构和上述定义的数据结构有些差别，需要过滤一下数据。
   b.在layout组件中，从store中获取菜单信息
3. 路由动态加载

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)
  }

权限管理

没搞到，后续更新