react 滚动分页列表点击进入详细，然后点击回退按钮，怎么能使回来的页面保持离开前的位置和状态？

Question

问题描述

在（A）页面原来的列表页面向下滚动滚动到第二页，点击列表<Link to="xxx"/> 跳转到详细（B）页面，在(B)页面点击返回按钮执行this.props.history.goBack() 返回到想一个页面，无法回显到(A)页面的位置和数据。

问题分析：this.props.history.goBack()返回之前的页面会重新调用组件渲染流程，这个和浏览器原生的window.history.back(-1)不一样。

期待的结果

目前react 有没有出插件可以模拟window.history.back(-1)的返回 或者解决方案 ？

Answer 1

其实现在的谷歌浏览器返回时可以记录之前滚动的位置的，但是可能兼容性比较差（你可以试试思否从列表页跳转到详情页，再返回）

如果需要更通用的方法，可以使用react-keeper来代替react-router，他可以返回的时候记录之前的位置

原理其实很简单，当你跳转的时候，那个列表页面是被隐藏了display:none，返回的时候再显示，根本不会重新渲染，所以滚动条也还在原来的位置

Answer 2

componentWillUnmount记录一下当前scroll的位置(redux or localstorage等等)。componentDidMount读取你之前记录的这个scroll位置值

Answer 3

使用这个 http://xialvjun.github.io/sta...

然后用 css 做成全屏模态框的模态框的模态框的XXX

Answer 4

1. 全屏弹窗，不使用路由
2. 弹窗路由：https://reacttraining.com/react-router/web/example/modal-gallery