在 V6 上 React Router 滚动到顶部

Question

当我更改页面时，应用程序将保持在上一页上的同一位置。我想在更改页面时从顶部显示组件。为了实现这一目标，我正在尝试实现 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 { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

Answer 1

正如其他人指出的那样，您正在使用Routes组件包装组件ScrollToTop，但我建议将其转换为 React hook，而不是编辑children它来渲染其隐式 prop，特别是考虑到它实际上并不渲染任何内容，您希望它运行作为导航的副作用。

function useScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
}

...

function App() {
  useScrollToTop();
  return (
    <div className="App">
      <div className="app-body">
        <NavBar />
        <Routes>
          <Route path="/portfolio" element={<Main />} />
          <Route path="/portfolio/projects" element={<Projects />} />
        </Routes>
      </div>
    </div>
  );
}

这必然需要您提升RouterReactTree 中的较高部分来包装组件App，以便它有一个用于useScrollToTop钩子的路由上下文。

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <Router>
      <App />
    </Router>
  </StrictMode>,
  rootElement
);