CJY

支持，之前在项目中也意识到这个问题，当时没有找到楼主的方案，自己也实现了一套 思路比较简单，Route 部分没有重造，利用原有 Route `children` prop 传递 function 时可控渲染行为的特点，产生一个 HOC 组件完成缓存行为 Switch 部分在业务上有要求，所以有必要支持 Switch 中的缓存路由功能，方法是继承原有 Switch 并覆写 render 部分实现支持 目前存在的最大问题，难以突破的瓶颈是，如果是嵌套路由中，上层路由是原有 Route，下层路由的缓存行为便无法自控，上层 Route 如果被卸载，内部的缓存路由也将全部卸载... 由此看来，最好还是 React 本身能给出官方的 keep-alive 方案，实现真实 dom 节点的缓存和复用......

@jamieYou 使用 [react-router-cache-route](https://github.com/CJY0208/react-router-cache-route)，这 3 个问题都可以解决 1. 利用模拟的生命周期在被缓存时解除监听或停止媒体播放，恢复时重新挂载监听或继续播放。滚动方面还可以尝试的措施为不共用全局滚动而改为每个页面设立独立的滚动容器 2. 仅在旧页面被缓存时将旧页面 dom 节点隐藏，或者调整 z-index 将其压入最下层，新页面的渲染中不做任何样式上的干预 3. 在 `react-router` 基础上使用，行为可期 楼主的方案相同，理论上也可以解决

@jamieYou 木有希望，官方目前明确表示不会支持，官方认为 keep-alive 带有缓存性质，是一个不纯行为，除了我们自己魔改拓展，目前别无他法 参考 https://github.com/facebook/react/issues/12039#issuecomment-411621949

@fi3ework 可以理解的啦 官方对 `React` 的定位和期望挺高的，是一个通用基础底层架构的存在 作为基础、具有函数式特征、兼容 ssr，从这几点来看的话，官方确实没必要为了某些便捷性而给 `React` 引入一个有隐患的特性 但也并没有完全阻止我们的魔改之路~~哈哈，不然也不会有今天的讨论了 @jamieYou 另外还找到了一个不一样的实现方案 [react-keep-alive](https://github.com/StructureBuilder/react-keep-alive) 原理大致是利用 `createPortal` 将被卸载的组件保留，总体上比借助 `react-router` 更接近 `keep-alive` 书写方式和行为预期 但测试中似乎无法保留滚动位置，可能和 `createPortal` 工作方式有关

+1

先不要包裹住 Tabs 吧，不太确定是不是动画初始化的原因 

可以提供简单的 demo 吗？听起来不太好查的样子

暂时没有，原理差不多，可能需要使用 `useOutlet` 而不是 ``，如下 ```jsx import { useLocation, useOutlet } from 'react-router-dom' import { KeepAlive } from 'react-activation' function Layout() { const location = useLocation() const outlet = useOutlet() return...

微应用场景下可能需要基座这边对子应用也 keep alive 一下，如果子应用被干掉了那子应用里的 AliveScope 也没了，缓存就没了

related: https://github.com/alitajs/umi-plugin-keep-alive/issues/31