使用 Switch (react-router) 时滚动到顶部

Question

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

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

虽然这很有效，并且对于嵌套在 ScrollToTop 组件中的任何路由，用户都会滚动到顶部，但如果将组件放置在 Switch 组件中，Switch 将不再像 Switch 那样运行;这意味着它将呈现它匹配的所有路由而不是第一个。

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

版本：react-router-v4

Answer 1

我不确定滚动的具体情况，但您可以将侦听器附加到 browserHistory，这可能是一种简单的方法（我认为 onUpdate 不适用于 v4）：

const browserHistory = createBrowserHistory();

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

<Router history={browserHistory} />

Answer 2

我遇到了同样的问题，每当更新时，它都会将用户带到scrollTo(0,0)

<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
  ...
</Router

如果上述方法不起作用：

在 react-router-v4 scroll Restoration

这很容易用一个组件来处理，该组件会在每次导航时向上滚动窗口，确保将其包装在 withRouter 中以使其能够访问路由器的道具：

 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

Answer 3

我设法使用react-router-v4 滚动恢复并将 ScrollToTop 放置在Switch 之外解决了这个问题。还要记得使用withRouter，否则它不起作用。