React Router v6.12路由切换时滚动到顶部问题求助

核心原因分析 #

你的代码中useEffect能正常触发（控制台打印日志），但滚动无效，大概率是实际滚动容器不是全局window/document.documentElement——看你的App结构，.content容器可能设置了overflow-y: auto和固定高度，页面滚动实际是在这个容器内进行的，而非全局窗口。

解决方案 #

方案1：修复自定义ScrollToTop组件（针对容器滚动） #

修改ScrollToTop组件，将滚动目标切换到实际的.content容器：

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

const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    // 定位到实际滚动的.content容器
    const contentContainer = document.querySelector('.content');
    if (contentContainer) {
      contentContainer.scrollTo(0, 0);
    }
    // 同时确保全局窗口也滚动到顶部（如果需要）
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
};

export default ScrollToTop;

先检查你的App.css中.content的样式，确认是否存在类似配置：

.content {
  min-height: calc(100vh - 80px); /* 减去导航栏+页脚高度 */
  overflow-y: auto; /* 开启容器内滚动 */
}

方案2：使用React Router内置滚动恢复功能（推荐，支持后退恢复位置） #

React Router v6.4+ 内置了滚动恢复机制，只需简单配置就能同时实现：跳转新路由滚到顶部、后退恢复原位置。

步骤1：配置路由器的滚动恢复

修改router.js，添加scrollRestoration配置：

import { createBrowserRouter } from "react-router-dom";

import App from "./views/layouts/App.jsx";
import HomePage from "./views/HomePage.jsx";
import Items from "./views/Items.jsx";
import About from "./views/About.jsx";
import Contact from "./views/Contact.jsx";

const router = createBrowserRouter(
  [
    {
      path: "/",
      element: <App />,
      children: [
        { path: "/", element: <HomePage /> },
        { path: "/items", element: <Items /> },
        { path: "/about", element: <About /> },
        { path: "/contact", element: <Contact /> },
      ],
    },
  ],
  {
    scrollRestoration: "auto", // 开启内置滚动恢复
  }
);

export default router;

步骤2：绑定自定义滚动容器（如果是容器内滚动）

如果滚动是在.content容器内进行，需要在App.jsx中绑定容器ref：

import { Outlet, useScrollRestoration } from "react-router-dom";
import { useEffect, useRef } from "react";

import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";

function App() {
  const contentRef = useRef(null);
  // 自定义滚动恢复的标识key
  const scrollRestoration = useScrollRestoration("content-scroll");

  useEffect(() => {
    if (!contentRef.current) return;
    // 将滚动容器绑定到内置的滚动恢复实例
    scrollRestoration.ref(contentRef.current);
  }, [scrollRestoration]);

  return (
    <>
      <Navbar />
      <div className="content" ref={contentRef}>
        <Outlet />
      </div>
      <Footer />
    </>
  );
}

export default App;

如果是全局窗口滚动，只需配置路由器的scrollRestoration: "auto"即可，无需额外绑定ref。

内容的提问来源于stack exchange，提问作者Galbert