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

Question

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

根据react-router 滚动恢复的文档,推荐的方法是设置一个组件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)

\n\n

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

\n\n

如果以上不起作用：

\n\n

在react-router-v4中 滚动恢复

\n\n

使用在每次导航时向上滚动窗口的组件来处理这一点很简单，请确保将其包装在 withRouter 中以使其能够访问 router\xe2\x80\x99s 属性：

\n\n

 componentDidUpdate(prevProps) {\n    if (this.props.location !== prevProps.location) {\n      window.scrollTo(0, 0)\n    }\n  }\n\n  render() {\n    return this.props.children\n  }\n}\n

\n\n

然后将其渲染在应用程序的顶部，但在路由器下方

\n\n

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

\n\n

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

\n