React 和react-router ,实现回退的时候，如何使页面回退到以前的状态

#1

最近用react 和react-router 实现一个单例页面，其中有一个列表页，点击列表页的其中一项，进入详情页。这个时候如果点击详情页的返回按钮，回退到列表页，由于react会重新装载页面，所以页面又会回到第一次进入的状态，而不会保存滚动条，list数据等状态。请教一下，有没有实现这个的方法。

#2

一般来说会把加载页面的必要信息放URL里
后退就是浏览器的后退，然后componentDidMount的时候根据这些信息去请求API。
想避免这次请求的话就在API层再做个cache
不过滚动条确实比较麻烦，不知道其它人有没有什么好办法

个人对此类问题的观点是即使是单页应用，也是基于WEB的，WEB应该有的规则还是要去遵守，
比如URL是拿来做资源定位的，刷新是重新获取资源的。很多单页应用忽略这点，最后的结果要么是体验悲剧，要么是缘木求鱼

1 Like
#3

我们在cordova+html5 里面用的是html5的本地存储.

  1. 点击列表记录当前滚动条位置
    2.存储当前已经加载的数据到本地
    3.详情回退后,取出本地的数据,滚动条重新定位到之前的位置
  2. 删除已存储数据
2 Likes
#4

用flux或redux等处理数据流的库，来管理数据，就能实现数据不丢失的问题，
至于保存滚动条位置，我发现大部分浏览器自身实现了，不需要js处理，如果需要处理，可以通过楼上的方法

1 Like
#5

http://www.icafebolger.com/reactjs/reactrefresh.html

#6

可以使用 react-router 做页面切换，但Route 对应path 没有匹配时会卸载掉注册的组件，在重新match 时重新挂载，也会造成刷新的情况

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