ant-design-pro从服务器加载menu菜单

ant-design-pro项目的菜单可以在config文件夹下的routes.ts文件里配置. 如果需要通话后端数据接口获取,官方也提供了方法
routes.ts文件里的路由还是要添加,和静态路由是一样 菜单接口数据, commonLayout公共页面部分 和redirect菜单重置部分不需要了,其他和routes.ts的数据格式一样   app.tsx中修改 可以把获取菜单放到初始数据方法获取getInitialState中   图标不能直接显示出来,这里可以做一个映射 在layout中可以通过postMenuData和menu赋值获取的菜单数据
postMenuData不会重新渲染,应该只是元素的显示隐藏 menu的request接受一个数据类似Protable的request,这个是默认带locale国际化的,如果没有需要关闭国际化locale: false

ps: 2022/5/16修改: 图标的显示之后在文档中看到另一种生成方法,不用在映射一次.写入图标全名,使用创建

import Icon from '@ant-design/icons'
import * as icons from '@ant-design/icons'

// 映射菜单对应的图标
const loopMenuItem = (menus: MenuDataItem[]): MenuDataItem[] =>
  menus.map(({ icon, routes, ...item }) => ({
    ...item,
    icon: icon && ,
    routes: routes && loopMenuItem(routes),
  }));

这样就可以了,显示效果,