antd pro v5 react动态路由（非动态菜单）_kabudada_runtimelayoutconfig

irpas 02-07 6618

注：这里说的动态路由不是真的动态路由，只是借助全量菜单达到相同的功能效果

项目背景： antd pro v5 react ，要实现的功能是：admin在页面可新增功能模块与menu对应，而不是单纯地勾选已有菜单的展示与隐藏，换句话说：需要访问路由文件中没有的路径（不可能，意思是这样）

如何实现：

在config/routes.ts中新增全量路由：例：

export default [ ? { ? ? //此路径用于用户在页面手动添加配置 ? ? name: 'pageconfig', ? ? path: '/page', ? ? component: './DemoComponent', ? }, ? { ? ? //此路径用于用户在页面手动添加配置 ? ? name: 'pageconfig', ? ? path: '/page/:firstId', ? ? component: './DemoComponent', ? }, ? { ? ? //此路径用于用户在页面手动添加配置 ? ? name: 'pageconfig', ? ? path: '/page/:firstId/:secondId', ? ? component: './DemoComponent', ? }, ? { ? ? //此路径用于用户在页面手动添加配置 ? ? name: 'pageconfig', ? ? path: '/page/:firstId/:secondId/:thirdId', ? ? component: './DemoComponent', ? }, ]

此路由配置可以支持用户在页面配置page/:XXXX/:XXXXX/:XXXX(支持到3级，若还需多级，需要在路由文件中继续新增）

页面配置可以如此：（只是举个例子，具体情况可以改动）

遇到的问题:

1.无法从第一级就设置参数传入，也就是说必须page/:XXXX,而不能/:XXX

解决办法：将所有新增的路由都默认加上page/,这样也方便管理，所有的新增路由都在page下面。

而此时的前端页面的菜单会有问题，无法将page下面的模块分开，只能共用page这个一级菜单，如何让新增的板块都能分开展示在第一级菜单页面呢？

antd pro的菜单中有一个参数叫做菜单提升 flatMenu，在App.tsx中的

export const layout: RunTimeLayoutConfig

中配置memu：

menu: { ? ? ? params: { ? ? ? ? userId: initialState?.currentUser?.userid,//引起菜单请求的参数 ? ? ? }, ? ? ? request: async (params, defaultMenuData) => { ? ? ? ? // initialState.currentUser 中包含了所有用户信息 ? ? ? ? const menuData = await queryCurrentMenu();//从后端获取菜单的方法 ? ? ? ? patchRoutes([...menuData?.data]);//格式化菜单，如果根据菜单参数来，似乎无需做这一步 ? ? ? ? return fixMenuItemIcon(menuData?.data); ? ? ? }, ? ? },

queryCurrentMenu返回的菜单格式是：

[ { ? ? ? ? ? path: '/page', ? ? ? ? ? name: '配置页面', ? ? ? ? ? icon: 'partition', ? ? ? ? ? /**flatMenu路由提升 ? ? ? ? ? ?* 由于配置的路由必须在代码中注册 ? ? ? ? ? ?* 所以新增的模块都以/page开头 ? ? ? ? ? ?* 但统一加了/page之后选中其中一个菜单其他菜单会同时高亮 ? ? ? ? ? ?* 所以使用了菜单路由提升 ? ? ? ? ? ?*/ ? ? ? ? ? menu: { ? ? ? ? ? ? flatMenu: true, ? ? ? ? ? }, ? ? ? ? ? routes: [ ? ? ? ? ? ? { ? ? ? ? ? ? ? //这里才是菜单第一层，做了路由提升，解决admin新配置顶级菜单的时候不同一级菜单同时高亮 ? ? ? ? ? ? ? path: '/page/page1', ? ? ? ? ? ? ? name: 'test页面', ? ? ? ? ? ? ? icon: 'partition', ? ? ? ? ? ? ? routes: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? path: '/page/page1/page1-1', ? ? ? ? ? ? ? ? ? name: 'test页面1-1', ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? path: '/page/page1/page1-2', ? ? ? ? ? ? ? ? ? name: 'test页面1-2', ? ? ? ? ? ? ? ? ? routes: [ ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? path: '/page/page1/page12/page121', ? ? ? ? ? ? ? ? ? ? ? name: 'test页面1-2-1', ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? path: '/page/page1/page12/page122', ? ? ? ? ? ? ? ? ? ? ? name: 'test页面1-2-2', ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ], ? ? ? ? ? ? }, ? ? ? ? ? ? { ? ? ? ? ? ? ? name: '配置页面', ? ? ? ? ? ? ? path: '/page/page2', ? ? ? ? ? ? ? icon: 'dot-chart', ? ? ? ? ? ? ? routes: [ ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? path: '/page/pageconfig/pageconfig1', ? ? ? ? ? ? ? ? ? name: '配置第一子级1', ? ? ? ? ? ? ? ? ? routes: [ ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? path: '/page/pageconfig/pageconfig1/pageconfig11', ? ? ? ? ? ? ? ? ? ? ? name: '配置第二子级1-1', ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? ? ? path: '/page/pageconfig/pageconfig1/pageconfig12', ? ? ? ? ? ? ? ? ? ? ? name: '配置第二子级1-2', ? ? ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? ? ], ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? { ? ? ? ? ? ? ? ? ? path: '/page/pageconfig/pageconfig2', ? ? ? ? ? ? ? ? ? name: '配置第一子级2', ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ], ? ? ? ? ? ? }, ? ? ? ? ? ], ? ? ? ? } ]

这样既能解决无法将新增的页面放在不同的一级菜单，也能解决由于他们都在page下面，而导致的点击其中某一个模块导致的同时菜单高亮。

这是基于这个功能需求我能想到的，有更好的请分享给大家~