react-router 处理下拉加载更多 list 数据时，如果实现浏览器位置保持？

Question

比如说我有一商品的 list组件，当下拉加载更多数据到第1000多条时， 点击item列表项跳转到detail组件，这时点击浏览器的返回按钮，如何保持list 组件 1000条item数据项时的位置状态？！因为浏览器回退后当前页面的js会重新执行，又会把数据恢复成前几条。

如果能知道当前页面是通过回退得到也蛮好处理，但是如何通过js去判断浏览器当前地址是通过后退按钮得到，还是通过点击了页面上的链接得到呢？！或者还有没有更好的方法解决这样的场景？

Answer 1

官方承诺后面会加这个功能。

如果现在必须要实现，可以通过 onEnter和onLeave事件实现（不知道最新版还叫这个名字吗，你试试）

React.render(
    (
        <Router>
            <Route path="/" component={App}>
                <IndexRoute  component={PostListElement}
                             onEnter={()=>{ utils.Scroll.restoreScroll('PostList') }}
                             onLeave={()=>{ utils.Scroll.setScroll('PostList') }} />

                <Route path="posts/:postId" component={PostDetailElement} />
            </Route>
        </Router>
    ),
    document.getElementById('mount-dom')
)

//写个Utils，通过key，记录scroll的位置
//注意restoreScroll时，需要一个setTimeout 0,不然无效
Utils.Scroll= createScrollMgr()

function createScrollMgr(){
    var scrollMap={}

    return {
        restoreScroll(key){
            if(!(key in scrollMap)){
                scrollMap[key] = {
                    x:0,
                    y:0
                }
            }
            var _s =  scrollMap[key]
            const x = _s.x,
                y = _s.y;
            setTimeout(function(){
                window.scrollTo(x,y);
            },0)
        },
        setScroll(key){
            scrollMap[key] = {
                x:window.pageXOffset || document.documentElement.scrollLeft,
                y:window.pageYOffset || document.documentElement.scrollTop
            }
        },
        deleteScroll(key){
            delete scrollMap[key];
        }
    }
}

Answer 2

今天看React Router官方Demo
https://github.com/rackt/react-router/tree/master/examples/pinterest

里面使用了modal模式，应该能够解决这个问题