滚动到顶部反应 react-router-dom 页面更改答案

【问题标题】：scroll to top on react react-router-dom page change滚动到顶部反应 react-router-dom 页面更改
【发布时间】：2018-12-03 04:22:51
【问题描述】：

我正在使用react-router-dom 来实现我的 reactjs 应用程序的路由！但我对此有一个问题，我找不到任何有效的解决方案来滚动到页面顶部的更改。有没有人能帮帮我？？？

这是我的路由代码：

    <BrowserRouter  basename={basename}> 
          <Switch>
                    <MobilePage hasNav navType="primary" exact path={`/restaurant`} component={VendorList} />
                    <MobilePage hasNav navType="primary" path={`/restaurant/:vendorCode`} component={VendorDetails} /> 
          </Switch>
    </BrowserRouter>

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

在componentDidMount()函数window.scrollTo(0,0)中添加VendorList和VendorDetails

【讨论】：

您还应该在滚动到顶部的同时重置键盘焦点。我写了一个东西来处理它：github.com/oaf-project/oaf-react-router
@danielnixon 如何将 basename 参数与 oaf-react-router 一起使用？它似乎被忽略了。
@danielnixon 我使用的是 BrowserRouter 标签的 basename 属性，但我想我现在需要将它作为 createBrowserHistory 的配置属性移动？
@danielnixon 我设法通过将基本名称从 BrowserRouter“标签属性”移动到 createBrowserHistory 的配置属性来使其工作，但我也不得不降级到 history@4.10.1，因为 history@ 5.0.0 已移除对 basename 的支持。
oaf-react-router 卡在 history@4 上，因为 react-router 使用的是：github.com/ReactTraining/react-router/blob/master/…

【解决方案2】：

我目前正在使用 react-router-dom v5（我发现这些解决方案中的大多数都适用于 v4），但我很惊讶地没有找到在转换中将页面加载到顶部的解决方案。

解决我的问题的方法是安装 react-router-scroll-top 并将包装器放在这样的位置：

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

一切都按预期进行。

【讨论】：

【解决方案3】：

安装下面的插件 https://www.npmjs.com/package/react-router-scroll-top

import ScrollToTop from 'react-router-scroll-top'

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

【讨论】：