小编Lua*_*ira的帖子

当我更改页面时，应用程序将保持在上一页上的同一位置。我想在更改页面时从顶部显示组件。为了实现这一目标，我正在尝试实现 React Router ScrollToTop。

我找到了文档并实现了它，但是我使用的是react router v6，所以它有点不同。

https://v5.reactrouter.com/web/guides/scroll-restoration

ScrollToTop 组件内的所有内容都不会渲染，最终会得到一个空白页面。

应用程序.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 …