Question

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

根据react-router docs 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

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

Answer 3

我遇到的问题与我所做的相同。每当更新时，用户都会转到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

复制而来的

使用Switch（react-router）时滚动到顶部

3 个答案: