Pro v5目前依然是beta版本，但是老夫在俩个月前已经迫不及待的上手搞了搞，有关v5对比之前版本有哪些改变，可以说，增加了很多Pro组件，并且ProComponents一直在更新迭代；同时优化了umi-request等很多，具体可以查看官方文档
从服务端请求菜单
在某些情况下，写死的菜单数据可能满足不了我们的需求，Pro 也提供了相应的解决方案来进行远程的菜单数据请求。这里我们需要用到两个 API 来配置完成。menuDataRender可以自定义数据格式，menu.loading可以让 menu 展示为一个 loading 的状态。
具体的代码实现如下，我们可以在src/app.tsx定义 layout 对象，并且导出。
export const layout = async ({initialState,}: {initialState: {settings?: LayoutSettings;menuData: Promise<BasicLayoutProps>;currentUser?: API.CurrentUser;};}): BasicLayoutProps => {return {menuDataRender: (menuData) => initialState.menuData || menuData,...initialState?.settings,};};
这样我们就可以通过== initialState== 来完成菜单的更新工作了，我们需要在src/app.tsx中写入如下代码：
export async function getInitialState(): Promise<{settings?: LayoutSettings;menuData: MenuDataItem[];}> {// 如果是登录页面，不执行if (history.location.pathname !== '/user/login') {const currentUser = await queryMenuData();return {menuData,settings: defaultSettings,};}return {menuData: [],settings: defaultSettings,};}
实现完成之后，菜单上会出现类似FundProjectionScreenOutlined菜单管理字样，这个时候需要引入ant的icons，之后进行配置
(此方法会引入ant的所有icon，从而会导致包变大，知悉)
import * as iconMap from '@ant-design/icons';return {name: lists.name,icon: lists.icon === null || lists.icon === 'table' ? '' : React.createElement(iconMap[lists.icon]),path: lists.router,component: lists.viewPath,}
