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页面更改的顶部

3 个答案: