umi Ant Design使用 @alitajs/keep-alive实现KeepAlive状态保存

使用

@alitajs/keep-alive

，需要使用组件包裹 layout 的最内层，原理就是劫持children。

使用教程如下：

1.安装

@alitajs/keep-alive

$ yarn add @alitajs/keep-alive
//或者
$ npm install @alitajs/keep-alive
           

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

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

3、在layout页面

import { KeepAliveLayout } from 'umi';
<Authorized authority={authorized.authority} noMatch={noMatch}>
     <KeepAliveLayout {...props}>{children}</KeepAliveLayout>
</Authorized>
           

4、解除缓存

import { dropByCacheKey } from 'umi';
const onClick = () => {
	dropByCacheKey('/about');
}