请问 react router 如何做 类似于 vue-route keep-alive 缓存功能?

aplayer
  • 435

如题,使用 react router v4 的时候发现,路由每次返回或者切换,都把之前路由填写的 数据都没了。

请问 使用 react router v4 应该如果缓存起来类似于这样情况的数据呢?类似于 vue route 的 keep alive

回复
阅读 7.7k
5 个回答

react-rounte 不能实现状态的缓存,也就是你提到的信息,状态会丢失。
推荐你使用 react-keeper
https://zhuanlan.zhihu.com/p/...

这个plugin 可以缓存一些具体的页面,详细你可以了解下API.
这个方案带来的负面效果是在跳转回来后不会触发生命周期函数(只有第一次触发),如果你有自己的逻辑,就得自己控制了。

可以试一下我造的轮子 https://github.com/fi3ework/r...
完全兼容 react-router-v4
在指定的路径下隐藏(缓存),返回时显示(取出缓存),在其他路径下正常卸载,并且能够恢复滚动位置。

第一种方式是把数据全部缓存到 Redux 或者 Mobx 这类数据流管理工具中,另一种方式是直接使用样式(display: block | none)进行控制。

我觉得这样比较麻烦,所以自己写了一个组件 react-keep-alive;这个组件没有直接使用样式来进行控制,而是使用了 React 16.3 新出的 createPortal API 把组件都挂载到了 App 外面,然后把 DOM 移动到显示的位置来实现的缓存。这样做能够很好的与 React Router 结合,并且也可以在切换页面时使用动画。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏