我有一个问题，当导航到另一个页面，它的位置将保持像之前的页面。所以它不会自动滚动到顶部。 我也试过使用window。onChange路由器上的scrollTo(0,0)。我还使用了scrollBehavior来修复这个问题，但它没有工作。对此有什么建议吗?
当前回答
平滑滚动选项
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth',
});
}, [pathname]);
return null;
}
...
<Router>
<ScrollToTop />
...
</Router>
其他回答
对我来说，是窗户。scrollTo(0,0)和document.documentElement。scrollTo(0,0)没有在我的所有屏幕上工作(只在一个屏幕上工作)。
然后，我意识到我的屏幕的溢出(滚动是允许的)不在窗口(因为我们有一些静态点，所以我们把溢出:auto在其他div)。
为了实现这一点，我做了以下测试:
useEffect(() => {
const unlisten = history.listen(() => {
console.log(document.documentElement.scrollTop)
console.log(window.scrollTop)
window.scrollTo(0, 0);
});
return () => {
unlisten();
}
}, []);
在所有的对数中，我得到0。
所以，我寻找我有滚动的容器，并放置一个id:
<div id="SOME-ID">
...
</div>
在我的ScrollToTop组件中，我放入:
useEffect(() => {
const unlisten = history.listen(() => {
window.scrollTo(0, 0);
document.getElementById("SOME-ID")?.scrollTo(0, 0)
});
return () => {
unlisten();
}
}, []);
现在，当我用history.push("/SOME-ROUTE")转到一条新路线时，我的屏幕会转到顶部
值得注意的是onUpdate={() =>窗口。scrollTo(0,0)}方法过时。
下面是react-router 4+的一个简单解决方案。
const history = createBrowserHistory()
history.listen(_ => {
window.scrollTo(0, 0)
})
<Router history={history}>
使用useEffect() -功能组件的解决方案
useEffect(() => {
window.history.scrollRestoration = 'manual';}, []);
render() {
window.scrollTo(0, 0)
...
}
在道具没有改变和componentDidUpdate()没有触发的情况下，这是一个简单的解决方案。
我想把我的解决方案分享给那些正在使用react-router-dom v5的人，因为这些v4解决方案中没有一个对我有用。
解决我的问题是安装react-router-scroll-top，并将包装器放在<App />中，如下所示:
const App = () => (
<Router>
<ScrollToTop>
<App/>
</ScrollToTop>
</Router>
)
就是这样!它工作!
