react-router 分页（无限加载）时问题？

Question

页面使用了react-router从列表页导航到详情页，在通过浏览器返回按钮回到列表页如何停留在原来页面对应位置？

列表页使用了分页，如从第2页的最后一条（页面需要滚动才能看到最后一条）进入详情，返回后列表如何停留在第2页的最后一条的位置，分页使用的是Ajax实现。

Answer 1

楼主需要的效果肯定是这样的http://xgk.microyan.com/cu　(我们网站要注册的，尴尬～)

说说我们的实现方式：每次滚动结束记录滚动结束位置，记在reducer里面，下次进入页面时，如果是后退进入的，则不重新加载数据，滚动条滚动到上次的位置。如果不是后退进入，则重新加载数据，滚动条位置设为０。

Answer 2

楼上的方法记录是记录在redux里的吧，要是在详情页刷新一次，就无法重现了，我已经注册过楼上的网页试过了。

我是采用缓存做。

当你点击列表页里的任何一条数据的时候

1. 记录数据到缓存

2. 记录滚动条位置到缓存

然后进入详情页

1. componentDidMount中判断stroe的数据长度是否为0，若为0肯定被刷新过页面了，这时候需要恢复缓存数据到store

点击返回到列表页：

1. 取出滚动条位置，js还原滚动条即可，由于你的store已经被恢复，这里就不需要再次恢复了

保护机制：
缓存被清理，然后又刷新页面，目前做法强制返回列表重新请求ajax，这个是个缺点，以后优化的话就是从路由中获取id重新在详情页面里ajax

Answer 3

@Just_do 你们的网站，没有注册，大概看了下，下图所示页面还是有问题的
切换到上面第二个标签，下拉加载到没有更多，再切换到其他任意一个，再切回来，页面并没有停在上次的位置，和刷是新一样！

感觉保存滚动位置和缓存页面数据，还不如直接把详情页面放在列表页上面，做显示隐藏！