umi Ant Design 使用umi-plugin-keep-alive实现KeepAlive状态存储

使用umi-plugin-keep-alive实现KeepAlive状态存储 1、安装

$ npm install umi-plugin-keep-alive --save
//或者
$ yarn add umi-plugin-keep-alive

2、使用

import { KeepAlive } from 'umi'
const contentList = () => {
    return (
        <>
            <KeepAlive 
                name="/About" //可按照name卸载缓存状态下的 <KeepAlive> 节点
                saveScrollPosition="screen" //自动保存共享屏幕容器的滚动位置
                when={true} >  //true卸载时缓存，false卸载时不缓存
                <About/> //要保存状态的组件
            </KeepAlive>
        </>
    )
}

此功能是基 react-activation，更详细的可参考 React Activation