react+umi+antd pro动态路由/动态菜单的配置

最新推荐文章于 2025-06-24 16:07:40 发布

eisha2015

最新推荐文章于 2025-06-24 16:07:40 发布

阅读量1.6w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： antd pro 动态菜单动态路由文章标签： react

本文链接：https://blog.youkuaiyun.com/eisha2015/article/details/114831390

本文介绍了如何在基于React、Umi和Ant Design Pro的项目中实现动态路由和菜单配置。通过从后端获取权限菜单数据，处理并替换静态的`routes.js`配置，解决了组件显示问题。在`BasicLayout.jsx`中直接修改`route.routes`实现了动态菜单，同时在`router.js`中封装了处理菜单数据的方法。动态菜单在左侧菜单栏正常显示，消除了组件不显示的故障。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司项目需要配置动态菜单，即从后端获取权限菜单，然后显示在左边菜单栏里。而我们现在的菜单是从静态配置文件config/routes.js中获得的。我一开始试过用umi封装的方法patchRoutes和render这两个方法结合来改变routes.js中的routes:

routes.js中留下必要的几个路由：

export default [
  {
    path: '/user',
    component: '@/layouts/UserLayout',
    routes: [
      {
        name: 'login',
        path: '/user/login',
        component: '@/pages/user/login',
      },
    ],
  },
  {
    path: '/',
    component: '@/layouts/SecurityLayout',
    routes: [
      {
        path: '/',
        component: '@/layouts/BasicLayout',
        routes: [
            // 动态菜单
        ],
      },
    ],
  },
  {
    component: './404',
  },
]

app.js

import { getRouterData } from '@/services/permission'

let routerData = []

export function patchRoutes({ routes }) {
  console.log("patchRoutes", routes)
  routerData.forEach(item => routes[1].routes[0].routes.push(item))
}

export function render(oldRoutes) {
  console.log("render")
  getRouterData().then(res => {
    if (res.code === 0) {
      routerData = res.data[0].children
    }
    // 必要操作，否则界面一直处于loading状态
    oldRoutes()
  })
}

但是这个方法有个问题，就是点击路由，界面不会显示相应的组件（有知道的解决方法的大神可以给大家参考下）。为此我也是找了好多文章，终于找到一个解决办法。就是在BasicLayout.jsx中直接修改route.这个方法我就没用到umi的patchRoutes方法了。

首先routes.js中也是保留以上内容
在BasicLayout.jsx中获取后端的菜单数据

import ProLayout, { DefaultFooter } from '@ant-design/pro-l

最低0.47元/天解锁文章

200万优质内容无限畅学