使用Switch（react-router）时滚动到顶部-Java 学习之路

当从一个页面导航到另一个页面时，我希望用户自动滚动到顶部，即 scrollTo(0, 0) .

根据 react-router docs on scroll restoration，推荐的方法是设置一个组件 ScrollToTop 并将您的路由包装在其中 .

虽然这很有效，并且用户可以滚动到嵌套在 ScrollToTop 组件中的任何路径的顶部，但如果组件放在 Switch 组件中，则 Switch 不再像Switch那样起作用;意味着它将渲染它匹配的所有路由而不是第一个路由 .

或者，将 ScrollToTop 放在 Switch 之外，它不再将用户滚动到顶部 .

版本： react-router-v4

3 回答

8
我不确定滚动，但你可以附加一个监听器 browserHistory 这可能是一个简单的方法（我不认为 onUpdate 适用于v4）：
```
const browserHistory = createBrowserHistory();

browserHistory.listen((location, action) => {
  window.scrollTo(0, 0);
});

<Router history={browserHistory} />
```
回复于 2024-05-05T20:49:45+08:00
2

我设法使用 react-router-v4 scroll Restoration并将ScrollToTop放在 Switch 之外来解决这个问题 . 还记得使用 withRouter 否则它将无法正常工作 .

回复于 2024-05-05T20:49:45+08:00
1
我有同样的问题，我所做的是每当更新它将带领用户 scrollTo(0,0)
```
<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router
```
如果以上不起作用：

在 react-router-v4 scroll Restoration

这很容易处理一个组件，它将在每个导航上滚动窗口，确保将其包装在withRouter中以使其能够访问路由器的props：
```
componentDidUpdate(prevProps) {
    if (this.props.location !== prevProps.location) {
      window.scrollTo(0, 0)
    }
  }

  render() {
    return this.props.children
  }
}
```
然后将其呈现在应用程序的顶部，但在路由器下方
```
const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)
```
上面的代码是从React-Router web guides复制的
回复于 2024-05-05T20:49:45+08:00