React Router V6如何实现回到页面顶部？

Question

当我切换页面时，应用程序会停留在以前页面的相同位置。我希望在切换页面时从顶部显示组件。为了实现这一点，我正在尝试实施React Router ScrollToTop。

我找到了文档并实施了它，但我正在使用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;
}

- Luana Teixeira

Answer 1

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

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>
  );
}

这需要你将 Router 上移到 React 树中更高的位置，以包装 App 组件，使其具有路由上下文并用于 useScrollToTop 钩子。

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

- Drew Reese

Answer 2

您将Routes组件作为ScrollToTop组件的后代，因此应该返回children而不是null。

ScrollToTop.js文件：

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

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

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

  return children;
}

- Lin Du

Answer 3

空白页面是因为你从组件中返回了null。相反，如果你返回<>或者取出{children}属性并从中返回它，它应该可以工作 :)

- Sanjay