Ant Design Pro4.0从踩坑到填坑（二）

Ant Design Pro单页面路由

需要按tab选项卡管理单页面路由，同时可以打开多个页面时，先看效果图

使用了github上一位大佬的插件地址
使用也很简单，目前还有一些bug需要大家在使用时自己尝试改进了，对于4.0版本有一些要注意的改动

1. 先把东西clone下来或者直接下载压缩包

git clone https://github.com/bailihuiyue/ant-design-pro-tabs.git

2. 复制src/components/TabPages文件夹到自己的项目当中的对应位置
3. 在自己项目的scr/layouts/BasicLayout.js中引入该组件，注意开头引入组件，路径根据自己的路径来

import TabPages from '@/components/TabPages/index';//组件所在路径
import NoAuth from '../pages/404';//错误页，可以自己写个

4. BasicLayout.js的这个位置按这样调用

<Authorized authority={authorized!.authority} noMatch={noMatch}>
     {/* {children} */}//注释掉
     <TabPages {...props} homePageKey='/welcome' errorPage={<NoAuth />} />//调用组件
</Authorized>

5. TabPages的index.js需要做一些配置来适配4.0

因为umi3.0代码上有如下改动：
connect，ConnectProps, getLocale, setLocale，formatMessage，Dispatch，Link，FormattedMessage，Reducer，Effect，AnyAction 全部修改为从 umi 中导入。统一了导入路径。
原有的 umi-plugin-react/locale 被废弃，所有从 umi-plugin-react/locale  中导出的皆可从 umi 中导入，原有的 router 修改为 history，api 不变。
所以
import router from 'umi/router';
import { formatMessage } from 'umi/locale';
需要改成
import { history,formatMessage  } from 'umi';
否则启动时找不到依赖会报not found的错

因为上面router改成了history，所以代码中调用router接口的都要改成history

window.onbeforeunload = () => "";//这行代码注释掉，否则每次刷新浏览器，会弹是否离开页面的提示

由于TabPages使用了good-storage类库，在运行前记得npm install good-storage，不然依赖不存在也会出错

至此配置完成=_=都是心酸泪啊。。。样式啥的自己配吧