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变化的时候控制是否需要滚动到顶部。
不忘初心,方得始终。