使用交换机时滚动到顶部(react-router)

Question

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

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

虽然这很好用，并且用户可以滚动到ScrollToTop组件中嵌套的任何路由的顶部，但如果组件放在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
  }
}

然后将其渲染到应用程序的顶部，但在Router下方

const App = () => (
  <Router>
    <ScrollToTop>
      <App/>
    </ScrollToTop>
  </Router>
)

上面的代码是从React-Router web guides复制的

Answer 3

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