我的 React 项目中有多个页面,每当我从一个页面切换到另一个页面时,页面位置从底部开始,但我想在呈现页面后保持在顶部。我目前正在使用路由器 v5,但找不到适用于路由器 v5 的任何解决方案。
我也试过另一个版本的解决方案,但是,它没有用,你能帮我解决这个问题吗?
这些是我迄今为止尝试过的一些示例,但没有一个有效。
<Router onUpdate={() => window.scrollTo(0, 0)} history={createBrowserHistory()}>
...
</Router>
function handleUpdate() {
let {
action
} = this.state.location;
if (action === 'PUSH') {
window.scrollTo(0, 0);
}
}
...
<Router
onUpdate={handleUpdate}
/>
最佳答案
这是我用来解决这个问题的方案。创建一个新组件:
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
const ScrollToTop = ({ children }) => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0, 0);
}, [pathname]);
return children || null;
};
export default ScrollToTop;
并将您的应用程序内容包装在浏览器路由器的内部
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './components/scroll-to-top/scroll-to-top';
function App() {
return (
<div className="App">
<BrowserRouter>
<ScrollToTop>
<div />
</ScrollToTop>
</BrowserRouter>
</div>
);
}
export default App;
关于javascript - 为什么从屏幕底部 react 新页面呈现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58598637/