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

最新推荐文章于 2024-06-01 20:33:36 发布

原创最新推荐文章于 2024-06-01 20:33:36 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#乔乐共享 #众观千象 #明天见吧一点点 #学习永无止境 #React

React 专栏收录该内容

32 篇文章

订阅专栏

本文介绍如何使用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变化的时候控制是否需要滚动到顶部。