react-router 返回顶部的两种方式

react

当我们使用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变化的时候控制是否需要滚动到顶部。

更多操作事件及获取属性参考:

以上是 react-router 返回顶部的两种方式 的全部内容, 来源链接: utcz.com/z/384151.html

回到顶部