求支持一下umi4

[chj-damon]

react router v6实际上已经实现了KeepAlive的功能，如果兼容到react router v6的话，应该不需要再借助umi-plugin-keep-alive插件就可以做到类似的效果。umi 4 底层是依赖于react router v6的， 所以希望能以插件的形式支持到umi 4上实现多tab的功能

[yunsii]

很好的建议，看起来 umi4 还没正式发布。我找时间先研究一下，之前只是简单了解过 react router v6。

支持 umi4 应该没啥问题，不过要想插件化支持好像不是很有必要，毕竟现目前已经封装成 React hook 了，可以方便自定义渲染标签化的页面，做成插件的话，得有个好的设计思路才行，所以会先尝试支持 react router v6。

[ghostrin]

在umi4 app.tsx中使用：
<SwitchTabsLayout
mode={switchTabs?.mode}
persistent={switchTabs?.persistent}
fixed={switchTabs?.fixed}
routes={route!.routes}
footerRender={() =>

}
>
{children}

提示找不到routes

[yunsii]

@ghostrin 输出一下 childrenRender 的 props，看看注入的路由结构什么样的。

[ghostrin]

代码如下：
childrenRender: (children: ReactElement<any, string | JSXElementConstructor>, props: { route: any; location: any; }) => {
const { route, location} = props;
debugger;
return (
<>
<SwitchTabsLayout
mode={switchTabs?.mode}
persistent={switchTabs?.persistent}
fixed={switchTabs?.fixed}
routes={route!.routes}
footerRender={() =>

}
>
{children}

</>
);

childrenRender 的 props，就是 const { route, location} = props;
找不到routes，其实也是props没有数据对象。

umi3中，props是有数据的，umi4有变化了，还是说switch-tabs组件触发的时机不对？

[yunsii]

这就是 break change 了，这几天我会看看什么情况。不过可以看一下这个 https://juejin.cn/post/7109492504424087566 如果这个实现更好的话，或许使用 umi@4 的话可以考虑迁移，后续我会调研一下。

[yunsii]

今天研究了一下，升级 react router v6 之后路由处理上更简单了，由于 react router v6 没有了 Switch 的概念，因此我会创建一个新的仓库实现同样的功能，敬请期待 😄

[yunsii]

哦对，react router 6 的 keep alive 还没研究呢，还得再看看，基于路由的 DEMO 是跑通了的 😅

[yunsii]

react router v6实际上已经实现了KeepAlive的功能

@chj-damon 这是哪儿来的说法？我没找到诶。

• Are there plans to support the keep-alive function？ remix-run/react-router#7092
• How to avoid routing jumps and component rerendering? remix-run/react-router#7357

找到以上的讨论，看起来 React Router 并没有 keep alive 的考虑，倒是在 React 官网上有 Offscreen 这个组件 API 的计划，但是目前来看还是没实现。

[chj-damon]

可能是我表述的问题。在react router v6里面，借助 和 useOutlet() 就可以在切换路由的时候保留上一个路由对应的组件，只要把它保存下来，实际上就变相地实现了keepalive的效果。

可以看看这个： https://github.com/alitajs/alita/tree/master/examples/tabs

[yunsii]

光保存不行，得保存渲染结果，我再研究研究

[chj-damon]

用户输入状态，接口返回的数据在切换tab的时候都不会丢的。

[yunsii]

https://jser.dev/react/2022/04/17/offscreen-component.html 找到个介绍 React Offscreen API 的文档，感觉还是需要处理 location 到 outlet 的缓存关系，不然即使 Offscreen 还是会因为 location 刷新导致 outlet 更新，最后并没有达成期望的 keep alive 效果。

[yunsii]

突然悟了，使用 Offscreen 就不用一定要用 antd 的 Tabs 组件保留渲染结果了。

[vscing]

https://jser.dev/react/2022/04/17/offscreen-component.html 找到个介绍 React Offscreen API 的文档，感觉还是需要处理 location 到 outlet 的缓存关系，不然即使 Offscreen 还是会因为 location 刷新导致 outlet 更新，最后并没有达成期望的 keep alive 效果。

location search参数变更，导致监听相同参数的页面都重新请求了接口。这个有好的想法解决吗？

[yunsii]

location search参数变更，导致监听相同参数的页面都重新请求了接口。这个有好的想法解决吗？

有在线 Demo 吗？有空我这几天可以看看

[vscing]

location search参数变更，导致监听相同参数的页面都重新请求了接口。这个有好的想法解决吗？

有在线 Demo 吗？有空我这几天可以看看

`

// url query参数
const [searchParams] = useSearchParams();
const id = searchParams.get('id');

useEffect(() => {
if(id) {
// 请求用到id
featch(id);
}
}, [id]);

`

[yunsii]

这样的话我觉得你可能需要比对页面的 route path 是否匹配当前的 route path

[vscing]

这样的话我觉得你可能需要比对页面的 route path 是否匹配当前的 route path

感觉只能这样了

[vscing]

这样的话我觉得你可能需要比对页面的 route path 是否匹配当前的 route path

但是同一个详情页，参数不同。。就又噶了

[yunsii]

但是同一个详情页，参数不同。。就又噶了

那就绑定 location 咯 😂

[yunsii]

先关闭了，后续统一在 yunsii/ant-design-pro-plus#62 跟进