我有一个问题，当导航到另一个页面，它的位置将保持像之前的页面。所以它不会自动滚动到顶部。 我也试过使用window。onChange路由器上的scrollTo(0,0)。我还使用了scrollBehavior来修复这个问题，但它没有工作。对此有什么建议吗?
当前回答
反应16.8 + 如果你正在运行React 16.8+，这是一个简单的处理组件，它会在每个导航中向上滚动窗口: 这是scrollToTop.js组件
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
export default function ScrollToTop() {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return null;
}
然后在应用程序的顶部渲染它，但在路由器下面 这是在app.js中
import ScrollToTop from "./scrollToTop";
function App() {
return (
<Router>
<ScrollToTop />
<App />
</Router>
);
}
或者在index.js中
import ScrollToTop from "./scrollToTop";
ReactDOM.render(
<BrowserRouter>
<ScrollToTop />
<App />
</BrowserRouter>
document.getElementById("root")
);
其他回答
我发现ReactDOM.findDomNode(this). scrollintoview()正在工作。我把它放在componentDidMount()中。
值得注意的是onUpdate={() =>窗口。scrollTo(0,0)}方法过时。
下面是react-router 4+的一个简单解决方案。
const history = createBrowserHistory()
history.listen(_ => {
window.scrollTo(0, 0)
})
<Router history={history}>
一个可以添加到Route组件的React Hook。使用uselayouteeffect而不是自定义监听器。
import React, { useLayoutEffect } from 'react';
import { Switch, Route, useLocation } from 'react-router-dom';
export default function Routes() {
const location = useLocation();
// Scroll to top if path changes
useLayoutEffect(() => {
window.scrollTo(0, 0);
}, [location.pathname]);
return (
<Switch>
<Route exact path="/">
</Route>
</Switch>
);
}
更新:更新到使用useLayoutEffect而不是useEffect，以减少视觉上的干扰。大致可以理解为:
useEffect:渲染组件->油漆到屏幕->滚动到顶部(运行效果) useLayoutEffect:渲染组件->滚动到顶部(运行效果)->油漆到屏幕
取决于您是在加载数据(考虑旋转器)还是有页面转换动画，useEffect可能更适合您。
平滑滚动选项
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>
使用useEffect() -功能组件的解决方案
useEffect(() => {
window.history.scrollRestoration = 'manual';}, []);
