react 页面后退时数据还原

Question

遇到的问题： 当用户从一个列表页面进去详情页面，然后后退时重新获取数据，滚动条也回到最上面。

我为了解决这个问题，当用户离开页面时把数据，滚动条位置和页面路径存到localStorage了，然后返回进来的时候如果localStorage中有当前页面数据，就不再请发求，滚动条也正常还原（用的是react-router,browserHistory; 项目没用redux）。

新的问题： 我的项目大概有40个路由页面，要是挨个加上去挺麻烦，所以我想在路由页面用onEnter 和 onLeave 来完成上面的功能。但是onLeave的时候location中的state总是undefined。 请问大家是如何解决这个问题的？

log： {pathname: "/shop/category/2", search: "?tag_id=0", hash: "", state: undefined, action: "POP", …}

Answer 1

可以使用react-router-scroll：https://www.npmjs.com/package...

Answer 2

你还是用redux，history.goBack()你连缓存都不用写。

Answer 3

数据放redux，滚动条恢复可以用react router v3的中间件(v4不支持)

或者react keeper（类似react router） ，但是自带页面缓存