在 react react-router-dom 页面更改时滚动到顶部

Question

我正在使用 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>

Answer 1

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

Answer 2

我目前正在使用 react-router-dom v5（我发现的这些解决方案中的大多数都适用于 v4），令我惊讶的是找不到将页面加载到顶部的解决方案过渡。

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

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

一切都按预期进行。

Answer 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/>

在 react react-router-dom 页面更改时滚动到顶部

scroll to top on react react-router-dom page change

javascript

reactjs

react-router-dom