在umi的layout中使用keepalive包裹outlet的疑问

[jxccc1998]

No description provided.

[jxccc1998]

https://stackblitz.com/edit/react-ts-acqxdi?file=Page.tsx,Layout.tsx,index.tsx
在这个示例中，使用了useLocation更新key，但是每次切換路由会导致layout组件执行，使得layout上的公用组件会刷新，但是复用的layout在默认情况下应该是不会重新执行的。
但是好像其他办法绑定key会使得缓存无效，不确定是什么原因导致的（似乎只有useLocation可以和路由同步更新）

[MatthewTt]

请问你解决了吗

[jxccc1998]

请问你解决了吗

暂时先把缓存变为组件层级，用hoc包裹就行。outlet内部应该是有变化的

[MatthewTt]

请问你解决了吗

暂时先把缓存变为组件层级，用hoc包裹就行。outlet内部应该是有变化的

能贴一下代码不，刚开始学习不太明白😂

[jxccc1998]

请问你解决了吗

暂时先把缓存变为组件层级，用hoc包裹就行。outlet内部应该是有变化的

能贴一下代码不，刚开始学习不太明白😂

import { KeepAlive } from '@umijs/max';

const WithKeepAlive = (Component: any, name?: string) => {
  return function AddKeepAliveComponent() {
    return !!name ? (
      <KeepAlive cacheKey={name} name={name}>
        <Component />
      </KeepAlive>
    ) : (
      <Component />
    );
  };
};

export default WithKeepAlive;

在你要用的组件（页面级别的， Test是原来封装的组件）
export default WithKeepAlive(Test, location.pathname);

[MatthewTt]

请问你解决了吗

暂时先把缓存变为组件层级，用hoc包裹就行。outlet内部应该是有变化的

能贴一下代码不，刚开始学习不太明白😂

import { KeepAlive } from '@umijs/max';

const WithKeepAlive = (Component: any, name?: string) => {
  return function AddKeepAliveComponent() {
    return !!name ? (
      <KeepAlive cacheKey={name} name={name}>
        <Component />
      </KeepAlive>
    ) : (
      <Component />
    );
  };
};

export default WithKeepAlive;

在你要用的组件（页面级别的， Test是原来封装的组件） export default WithKeepAlive(Test, location.pathname);

感谢大哥🙏