React-router 浏览器后退的时候,如何使页面回退到以前的状态

用react 和react-router 实现的一个列表页,点击列表页的其中一项,进入详情页。

这个时候如果点击详情页的返回按钮(或者用户用浏览器后退),后退到列表页,由于react会重新装载页面,所以页面又会回到第一次进入的状态,而不会保存滚动条,

请教一下,如何保存滚动条呢。

阅读 14.8k
3 个回答

"现实在那个页面"是个什么鬼?

如果是保持scroll position的话,我猜已经修好了吧,看这:issue-2095,似乎和你是差不多的问题

Route 没有匹配对应 path 时会卸载掉对应组件,在重新 match 时重新挂载,造成刷新的情况

研究了一下 route 的源码,发现可以从其 children prop 入手,手动控制 match 在两种状态下组件的渲染规则,用“隐藏组件”替代“卸载组件”,就可以保留全部的数据和交互状态,整理成了轮子,增加了两个自定义的生命周期 didCache didRecover

https://github.com/CJY0208/re...

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