滚动到顶部 反应反应路由器-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

我目前正在使用 react-router-dom v5(我发现的大多数解决方案都面向 v4(，我很惊讶没有找到在过渡中加载页面到顶部的解决方案。

解决我问题的是安装 react-router-scroll-top 并将包装器放入如下所示：

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

一切都按预期工作。

Answer 2

添加到VendorList和VendorDetailscomponentDidMount()函数window.scrollTo(0,0)

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