React Router DOM路由切换时子页面自动滚动至父页面历史滚动位置的原因及CSS/React props层面的解决方案咨询

嗨，我来帮你拆解这个问题～

首先说为什么会出现这种情况：React Router DOM默认会维护路由的滚动历史状态，这是它为优化用户体验做的设计——比如用户从一个长列表页面跳走后再返回，能回到之前浏览的位置。但如果你的父页面和子页面共享同一个滚动容器（比如整个页面的body），当你在父页面滚动后切换到子页面，浏览器/React Router可能会保留当前的滚动位置，导致子页面加载时停在父页面滚动到的位置，而非顶部。

你提到已经在每个页面用useEffect做滚动到顶部但没生效？大概率是执行时机的问题：React Router的滚动恢复逻辑可能在你的useEffect之后执行，把你设置的滚动位置又覆盖回去了。

接下来给你不用每个页面写重复代码的解决方案，分为React官方配置和CSS两种方式：

React层面（用React Router自带能力） #

1. 使用ScrollRestoration组件（推荐） #

React Router v6+提供了ScrollRestoration组件，专门处理路由切换时的滚动行为。把它放在你的根路由组件（比如App.js）里，就能全局生效：

import { ScrollRestoration, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <div className="app-container">
      {/* 放在路由配置上方，全局处理滚动 */}
      <ScrollRestoration />
      <Routes>
        <Route path="/" element={<ParentPage />} />
        <Route path="/child" element={<ChildPage />} />
        {/* 其他路由 */}
      </Routes>
    </div>
  );
}

它的默认逻辑是：

• 进入新路由（之前没访问过）时，自动滚动到页面顶部
• 返回已访问过的路由时，恢复之前的滚动位置

如果想强制所有导航都滚动到顶部（不管是不是返回），可以结合useLocation和useLayoutEffect做全局处理，不用每个页面写：

import { useLocation, useLayoutEffect } from 'react-router-dom';

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

  useLayoutEffect(() => {
    // useLayoutEffect会在DOM更新后同步执行，比useEffect早，不会被路由的滚动恢复覆盖
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [pathname]);

  return null;
}

// 然后在App里引入这个组件
function App() {
  return (
    <div>
      <ScrollToTop />
      <Routes>
        {/* 你的路由 */}
      </Routes>
    </div>
  );
}

CSS层面的hack方案 #

如果不想修改太多JS代码，也可以用CSS强制页面容器在路由切换时滚动到顶部，适合滚动容器是body或者某个固定容器的场景：

针对body滚动的情况 #

/* 强制页面切换时滚动到顶部，配合路由切换的DOM更新触发 */
body {
  scroll-behavior: auto !important;
  animation: reset-scroll 0s forwards;
}

@keyframes reset-scroll {
  from, to {
    scroll-top: 0;
  }
}

这个动画会在body每次更新时（路由切换导致DOM变化）强制把滚动位置设为0，简单粗暴但有效。

针对自定义滚动容器的情况 #

如果你的页面内容是在某个自定义容器里滚动（比如.page-container），可以给这个容器加类似的样式：

.page-container {
  scroll-behavior: auto;
  animation: reset-container-scroll 0s forwards;
}

@keyframes reset-container-scroll {
  from, to {
    scroll-top: 0;
  }
}

最后再补充下：如果你之前的useEffect没生效，把它换成useLayoutEffect并依赖location.pathname，也能解决时机问题，不过用全局的ScrollToTop组件显然更省心。

备注：内容来源于stack exchange，提问作者Soumya Swaraj Sahoo