react-router跳转页面后返回顶部的方式

当我们使用react-router时,当我们从A页面进入B页面的时候,由于共享了同一个history,导致浏览的位置也被记录下来的,这样A页面滑动到底部了,进入B页面也会停留在底部,显然不符合我们的浏览习惯。
还好react-router提供相应的事件配置我们正常开发:

方案一 onUpdate:

<Router onUpdate={() => window.scrollTo(0, 0)} history={hashHistory}>  
    <Route path="/" component={ App }>  
</Router>

方案二:history.listen监控

hashHistory.listen((location) => {  
  setTimeout(() => {  
    if (location.action === 'POP') return;  
    window.scrollTo(0, 0);  
  
    console.log('Back to top', location);  
  });  
});  
  
<Router history={hashHistory}>  
    <Route path="/" component={ App }>  
</Router>

这样我们就可以每次当router变化的时候控制是否需要滚动到顶部。

posted @ 2018-12-14 11:45  我的诗和远方  阅读(1256)  评论(0编辑  收藏  举报