Umi Ant Design uses @alitajs/keep-alive to save KeepAlive state

With @alitajs/keep-alive, you need to wrap the innermost layer of the layout with a component that hijacks children.

Use the following tutorial:

1. Install @ alitajs/keep alive

$ yarn add @alitajs/keep-alive
/ / or
$ npm install @alitajs/keep-alive
Copy the code

2. On the config.js page, that is, the configuration page

export default {
    plugins: ['@alitajs/keep-alive'].keepalive: ['/about'] // The path that requires KeepAlive to save the state
}
Copy the code

3. On the Layout page

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

4. Remove the cache

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