react单页面应用中，点击浏览器回退按钮，怎么能使回来的页面保持离开前的状态？

Question

在原来页面上，选择了单选按钮组中某个单选按钮，然后根据这个单选按钮的值发送ajax请求，展示对应的数据，即展示一个table,当点击某个列表项时，跳转到另一个页面。进入另一个页面后，点击回退按钮，能使回到的这个页面保持跳转前的状态吗？即还是选择当初离开时选择的那个单选按钮，展示的还是原来的对应数据。

Answer 1

可以，我正好刚做了类似的实现，不过用到了 react-router 和 redux，在此仅提供思路

列表页的筛选条件加到 location 的 query 里，也就是在 URL 的问号后面的参数列表，同时在请求数据的 actionCreator 里，既要向服务器发送 query 里对应的请求参数，也要在返回的 action 里包含 query 的数据

在详情页通过 react-redux 访问相应的 reducer 的 query（通过 action 传递过来的），读取之前的列表页的筛选条件，渲染返回按钮时把参数加到 URL 路径后面当成参数即可

这样做既可以在返回时保留筛选条件，又可以将筛选条件固化到 URL 里，除了筛选条件，分页参数也可以这样做

Answer 2

楼上的方案不错，但是还是存在一些页面的交互信息不方便维护到location里面，比如一个巨长的列表页，要回退之后保持在上次浏览位置
可以定时在localstorage里面保持信息，当referrer是detail时读取localstorage内容做定位，否则清空localstorage

Answer 3

楼主这个问题你解决没有 ？
我也遇到同样的问题，我用this.props.history.goBack()返回之前的页面会重新调用组件渲染流程，这个和浏览器原生的window.history.back(-1)不一样。
目前react 有没有出插件可以模拟window.history.back(-1)的返回？

Answer 4

https://segmentfault.com/q/10...

Answer 5

window.onpopstate 好像也不错