当我切换页面时,应用程序会停留在以前页面的相同位置。我希望在切换页面时从顶部显示组件。为了实现这一点,我正在尝试实施React Router ScrollToTop。
我找到了文档并实施了它,但我正在使用React Router v6,所以有些不同。
我找到了文档并实施了它,但我正在使用React Router v6,所以有些不同。
https://v5.reactrouter.com/web/guides/scroll-restoration
在ScrollToTop组件内的所有内容都不会被呈现,结果我得到了一个空白页面。
App.js:
import { Router, Routes, Route } from "react-router-dom";
import './App.scss';
import Main from './pages/Main';
import Projects from './pages/Projects';
import NavBar from './components/NavBar';
import Footer from './components/Footer';
import ScrollToTop from './components/scrollToTop';
function App() {
return (
<div className="app" id="app">
<NavBar />
<div className='app-body'>
<Router>
<ScrollToTop>
<Routes>
<Route path="/portfolio" element={<Main />} />
<Route path="/portfolio/projects" element={<Projects />} />
</Routes>
</ScrollToTop>
</Router>
</div>
<Footer />
</div>
);
}
export default App;
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;
}