-
Notifications
You must be signed in to change notification settings - Fork 113
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
什么时候能够支持V6呢 #132
Comments
v6 的渲染方式好像变了,单靠 CacheRoute 不一定能把路由缓存下来,关键点转移到了 outlet 上,也就是类似现在的 Switch 上 所以,这个库不一定会继续对 v6 做支持,但也不是没有支持的方法,可以看我这个 demo,先做出简单的 keep 效果 https://github.com/CJY0208/umi4-keep-demo |
好的,我看看,谢谢 |
自告奋勇,推荐下自己写的这个https://github.com/liuye1296/react-keepAlive |
V6 是如何实现的? |
@wkylin 根据这位大佬提供的实现方式,简化并提取最核心的部分: import { ReactElement, useContext, useRef } from 'react';
import { Freeze } from 'react-freeze';
import { UNSAFE_RouteContext as RouteContext } from 'react-router-dom';
function KeepAliveOutlet() {
const caches = useRef<Record<string, ReactElement>>({});
const matchedElement = useContext(RouteContext).outlet; // v6.3之后useOutlet会多了一层嵌套
const matchedPath = matchedElement?.props?.value?.matches?.at(-1)?.pathname as string;
if (matchedElement && matchedPath) {
caches.current[matchedPath] = matchedElement;
}
return (
<>
{Object.entries(caches.current).map(([path, element]) => (
<Freeze key={path} freeze={element !== matchedElement}>
{element}
</Freeze>
))}
</>
);
} |
试了下 freeze 不行,用 createPortal 实现可以 |
我用到了Tabs.TabPane forceRender=true 简单的实现了一版, 可以了解一下:https://github.com/wkylin/pro-react-admin |
No description provided.
The text was updated successfully, but these errors were encountered: