Ant-design-pro: [问题]关于Ant Design Pro V4动态加载路由问题

[finghtingjie]

问题描述

需求是：项目脚手架是的v4版本的pro。在config.js里的routes需要动态替换成后端接口返回的routes对象，请问如何更改？

示例代码
const menuDataRender = menuList => menuList.map(item => { const localItem = { ...item, children: item.children ? menuDataRender(item.children) : [] }; return Authorized.check(item.authority, localItem, null); });
`<>
logo={logo}
onCollapse={handleMenuCollapse}
menuItemRender={(menuItemProps, defaultDom) => {
if (menuItemProps.isUrl) {
return defaultDom;
}

      return <Link to={menuItemProps.path}>{defaultDom}</Link>;
    }}
    breadcrumbRender={(routers = []) => [
      {
        path: '/',
        breadcrumbName: formatMessage({
          id: 'menu.home',
          defaultMessage: 'Home',
        }),
      },
      ...routers,
    ]}
    itemRender={(route, params, routes, paths) => {
      const first = routes.indexOf(route) === 0;
      return first ? (
        <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
      ) : (
        <span>{route.breadcrumbName}</span>
      );
    }}
    footerRender={footerRender}
    menuDataRender={menuDataRender}
    formatMessage={formatMessage}
    rightContentRender={rightProps => <RightContent {...rightProps} />}
    {...props}
    {...settings}
  >
    {children}
  </ProLayout>
  <SettingDrawer
    settings={settings}
    onSettingChange={config =>
      dispatch({
        type: 'settings/changeSetting',
        payload: config,
      })
    }
  />
</>`

Basiclayout.jsx

routes: [ { path: '/', component: '../layouts/BlankLayout', routes: [ { path: '/user', component: '../layouts/UserLayout', routes: [ { path: '/user', redirect: '/user/login', }, { name: 'login', path: '/user/login', component: './user/login', }, { name: 'register-result', path: '/user/register-result', component: './user/register-result', }, { name: 'register', path: '/user/register', component: './user/register', }, { component: '404', }, ], }, { path: '/', component: '../layouts/BasicLayout', Routes: ['src/pages/Authorized'], authority: ['admin', 'user'], routes: [ { path: '/dashboard', name: 'dashboard', icon: 'dashboard', routes: [ { name: 'analysis', path: '/dashboard/analysis', component: './dashboard/analysis', }, { name: 'monitor', path: '/dashboard/monitor', component: './dashboard/monitor', }, { name: 'workplace', path: '/dashboard/workplace', component: './dashboard/workplace', }, ], }, { path: '/form', icon: 'form', name: 'form', routes: [ { name: 'basic-form', path: '/form/basic-form', component: './form/basic-form', }, { name: 'step-form', path: '/form/step-form', component: './form/step-form', }, { name: 'advanced-form', path: '/form/advanced-form', component: './form/advanced-form', }, ], }, { path: '/list', icon: 'table', name: 'list', routes: [ { path: '/list/search', name: 'search-list', component: './list/search', routes: [ { path: '/list/search', redirect: '/list/search/articles', }, { name: 'articles', path: '/list/search/articles', component: './list/search/articles', }, { name: 'projects', path: '/list/search/projects', component: './list/search/projects', }, { name: 'applications', path: '/list/search/applications', component: './list/search/applications', }, ], }, { name: 'table-list', path: '/list/table-list', component: './list/table-list', }, { name: 'basic-list', path: '/list/basic-list', component: './list/basic-list', }, { name: 'card-list', path: '/list/card-list', component: './list/card-list', }, ], }, { path: '/profile', name: 'profile', icon: 'profile', routes: [ { name: 'basic', path: '/profile/basic', component: './profile/basic', }, { name: 'advanced', path: '/profile/advanced', component: './profile/advanced', }, ], }, { name: 'result', icon: 'check-circle-o', path: '/result', routes: [ { name: 'success', path: '/result/success', component: './result/success', }, { name: 'fail', path: '/result/fail', component: './result/fail', }, ], }, { name: 'exception', icon: 'warning', path: '/exception', routes: [ { name: '403', path: '/exception/403', component: './exception/403', }, { name: '404', path: '/exception/404', component: './exception/404', }, { name: '500', path: '/exception/500', component: './exception/500', }, ], }, { name: 'account', icon: 'user', path: '/account', routes: [ { name: 'center', path: '/account/center', component: './account/center', }, { name: 'settings', path: '/account/settings', component: './account/settings', }, ], }, { name: 'editor', icon: 'highlight', path: '/editor', routes: [ { name: 'flow', path: '/editor/flow', component: './editor/flow', }, { name: 'mind', path: '/editor/mind', component: './editor/mind', }, { name: 'koni', path: '/editor/koni', component: './editor/koni', }, ], }, { path: '/', redirect: '/dashboard/analysis', authority: ['admin', 'user'], }, { component: '404', }, ], }, ], }, ]
config.js

其他信息

[chenshuai2144]

搜一下历史 issue。
config.js 是 build 的时候去执行的。前端不可能做到动态路由的。