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

公司项目需要配置动态菜单，即从后端获取权限菜单，然后显示在左边菜单栏里。而我们现在的菜单是从静态配置文件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',
  },
]

1. 在src目录下新建一个app.js文件

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 Pro