React. umi AntD使用 @alitajs/keep-alive实现KeepAlive状态保存

使用@alitajs/keep-alive，需要使用组件包裹 layout 的最内层，原理就是劫持children。

使用教程如下：

1.安装 @alitajs/keep-alive

javascript
复制代码
$ yarn add @alitajs/keep-alive
//或者
$ npm install @alitajs/keep-alive

2、在config.js页，即配置页面

javascript
复制代码
export default {
    plugins:['@alitajs/keep-alive'],
    keepalive:['/about'] //需要KeepAlive保存状态的path路径
}

3、在layout页面

javascript
复制代码
import { KeepAliveLayout } from 'umi';
<Authorized authority={authorized.authority} noMatch={noMatch}>
     <KeepAliveLayout {...props}>{children}</KeepAliveLayout>
</Authorized>

4、解除缓存

javascript
复制代码
import { dropByCacheKey } from 'umi';
const onClick = () => {
    dropByCacheKey('/about');
}