主要涉及文件

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

動態(tài)菜單

由官網(wǎng)從服務器請求菜單可以完成動態(tài)菜單，但是獲得的菜單的icon是無效的，這個需要自己渲染。
具體實現(xiàn)如下

### src/app.tsx ##########
// 此處使用的是在 getInitialState 函數(shù)里面增加這個動態(tài)菜單的邏輯
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. 根據(jù)自己所需引入并寫入，這里使用的策略模式
        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,
}