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

时间:2018-06-24 10:43:16

标签: javascript reactjs react-router-dom

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

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分:2)

我目前正在使用react-router-dom v5(发现的大多数解决方案都适用于v4),我很惊讶地没有找到一种解决方案,可以在使用的过渡中将页面加载到顶部。

解决我问题的方法是安装react-router-scroll-top并将包装器放入这样:

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

一切都按预期进行。

答案 2 :(得分:0)

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

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

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