动态菜单

主要涉及文件

.
├── config
    ├── config.ts    
└── src
    ├── app.tsx

动态菜单

由官网从服务器请求菜单可以完成动态菜单，但是获得的菜单的icon是无效的，这个需要自己渲染。
具体实现如下

### src/app.tsx ##########
// 此处使用的是在 getInitialState 函数里面增加这个动态菜单的逻辑
import { HeartOutlined, DislikeOutlined } from '@ant-design/icons';    //  1. 引入需要的

const icons = {
  heartOutlined: <HeartOutlined />,
  dislikeOutlined: <DislikeOutlined />
}

......
 const fetchMenu = async () => {
    try {
      const menuList = await getMenu();
      const data = menuList.data.map((m: Object) => {
        const item = m;
        item.icon = icons[item.icon];                              //  2. 根据自己所需引入并写入，这里使用的策略模式
        return m;
      });
      return data;
    } catch (error) {
      history.push('/user/login');
    }
    return undefined;
  };

...
// 渲染写入菜单
return {
   onPageChange: () => {
      const { currentUser } = initialState;
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!currentUser && location.pathname !== '/user/login') {
        history.push('/user/login');
      }
    },
    menuDataRender: () => initialState.menuData,                     // 3. 写入
    menuHeaderRender: undefined,
}