React路由切换时自动滚动到顶部功能失效问题求助

你的问题核心在于：路由切换时调用window.scrollTo(0, 0)的时机不对——新页面的DOM内容还没完全渲染完成，后续内容加载导致页面高度变化，浏览器可能自动调整滚动位置，或者滚动操作被其他延迟执行的代码覆盖。

解决方案：优化滚动时机与方式 #

下面是修改后的ScrollToTop组件，通过浏览器重绘触发+定时器兜底的方式，确保滚动操作在页面内容稳定后生效：

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

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

  useEffect(() => {
    // 定义滚动到顶部的函数
    const scrollToTop = () => {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: "auto" // 强制立即滚动，避免平滑滚动的延迟干扰
      });
    };

    // 用requestAnimationFrame确保在浏览器重绘后执行，保证DOM已更新
    const rafId = requestAnimationFrame(scrollToTop);
    // 加定时器兜底，防止极端场景下requestAnimationFrame不触发
    const timer = setTimeout(scrollToTop, 100);

    // 清理副作用，避免重复执行或内存泄漏
    return () => {
      cancelAnimationFrame(rafId);
      clearTimeout(timer);
    };
  }, [pathname]);

  return null;
}

额外排查点 #

1. StrictMode影响：开发环境下StrictMode会让useEffect执行两次，不过上面的清理函数已经处理了重复的滚动请求，生产环境不会有这个问题。
2. 异步内容加载：如果新页面依赖异步数据（比如详情页的接口请求），可以在数据加载完成后再补一次滚动，比如在Details组件内：

// Details组件示例
import { useEffect, useState } from "react";

function Details() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 模拟接口请求
    fetch(`/api/projects/${id}`)
      .then(res => res.json())
      .then(resData => {
        setData(resData);
        // 数据加载完成后滚动到顶部
        window.scrollTo(0, 0);
      });
  }, [id]);

  return <div>{data && <div>{data.content}</div>}</div>;
}

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