antd ProLayout component - fetch menu data from server

Question

I'm using UmiJs for my configurations and I want to add Routes that I fetch from an API.

My problem is that the data are too many, being used on other parts of the app and has possible changes in the future. So for me to avoid updating the Menu data manually everytime there are changes, I want to fetch them from server and map them to the routes configuration.

The routes has properties like name, path and component. Those data will be a reference for Ant Design Pro Layout and will be displayed in the Menu when I run the project.

It works when I add routes normally for example:

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

But it does not work when I fetch the data from an API, for example:

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

Is this possible? or is there a way for me to ensure that fetchRoutesData() has been completed before the app uses the configuration? (I already tried async await here but still, the routes Data from API was not displayed in the Menu)

Thank you in advance.

Answer 1

I have solved the problem by using UmiJS feature patchRoutes and render(overrides default render) which should be placed inside src/apps.ts.