antd ProLayout 组件 - 从服务器获取菜单数据

Question

我正在使用 UmiJs 进行配置，我想添加从 API.

中获取的路由

我的问题是数据太多，正在应用程序的其他部分使用，将来可能会发生变化。因此，为了避免每次有更改时手动更新菜单数据，我想从服务器获取它们并将它们映射到路由配置。

路由具有名称、路径和组件等属性。这些数据将作为Ant Design Pro Layout的参考，并且会在我运行项目时显示在Menu中。

当我正常添加路由时它有效，例如：

routes: [
  {
    name: 'sampleName',
    path: 'samplePath',
    component: 'SampleComponent',
  }
]

但是当我从 API 中获取数据时它不起作用，例如：

routes: [...fetchRoutesData()] //fetchRoutesData contains an httpRequest and returns an array of routes object.

这可能吗？或者我有没有办法确保在应用程序使用配置之前 fetchRoutesData() 已经完成？（我已经在这里尝试过 async await 但是，来自 API 的路由数据仍然没有显示在菜单中）

提前谢谢你。

Answer 1

我已经通过使用 UmiJS 功能 patchRoutes 和渲染（覆盖默认渲染）解决了这个问题，它应该放在 src/apps.ts.

antd ProLayout component - fetch menu data from server