react umi 页面缓存

1.安装

yarn add umi-plugin-keep-alive

2.Layout中写逻辑

import Menu from './components/menu/index';
import { history, useDispatch, KeepAlive } from 'umi';

const Layouts = (props) => {
  const keepAliveRoutes =JSON.parse(localStorage.getItem('newMenuList')) || '[]';
   //因为此项目是所有页面保存，所以遍历生成的数组，格式如下
  // const keepAliveRoutes = ['/reserveSys/lawManage', '/reserveSys/psychologyManage'];
  const isLogin = localStorage.getItem('token');

  if (!isLogin) {
    history.push('/login');
  }

  if (!isLogin) {
    return <div>{props.children}</div>;
  } else {
    return keepAliveRoutes.includes(props?.location?.pathname || '') ? (
      <KeepAlive
        name={history.location.search || history.location.pathname}
        id={history.location.search || history.location.pathname} //同一模块下，多个页面属于多缓存，必须加id,不然缓存会失效
        when={() => {
          // 根据路由的前进和后退状态去判断页面是否需要缓存，前进时缓存，后退时不缓存（卸载）。 when中的代码是在页面离开（卸载）时触发的。
          return history.action != 'POP'; // true卸载时缓存，false卸载时不缓存
        }}
      >
        <Menu {...props} />
      </KeepAlive>
    ) : (
      <Menu {...props} />
    );
  }
};
export default Layouts;