react-router-dom 5.3.4中history.push后scrollTo无效问题求助

核心原因 #

1. 路由跳转后首页组件未完成渲染，此时计算的文档高度（document.documentElement.scrollHeight）不准确，导致滚动位置错误
2. react-router-dom默认会在路由切换时自动滚动到页面顶部，覆盖手动触发的scrollTo操作

具体解决方案 #

1. 禁用react-router的默认滚动行为 #

在react-router-dom 5中，可通过自定义Router组件的scrollBehavior阻止默认滚动到顶部的行为。若使用BrowserRouter，可改用Router配合自定义history：

import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

// 覆盖默认滚动行为，避免自动回到顶部
history.scrollBehavior = () => ({ x: 0, y: 0 });

function App() {
  return <Router history={history}>{/* 你的路由配置 */}</Router>;
}

2. 等待首页渲染完成后执行滚动 #

不在路由跳转后立即调用scrollTo，而是在首页组件中监听路由参数，待DOM渲染完成后触发滚动：

步骤一：跳转时携带滚动进度参数

// 菜单点击处理逻辑
const handleMenuClick = (link) => {
  if (link.type === 'internal') {
    // 对应每个target的progress值，比如PURPOSE传0.2、ISSUE传0.5等
    const progress = getProgressByLink(link.label);
    history.push({
      pathname: '/',
      search: `?scrollProgress=${progress}`
    });
  } else {
    history.push(link.target);
  }
};

步骤二：首页组件中读取参数并执行滚动

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

function HomePage() {
  const location = useLocation();

  useEffect(() => {
    const urlParams = new URLSearchParams(location.search);
    const scrollProgress = urlParams.get('scrollProgress');
    if (scrollProgress) {
      // 用requestAnimationFrame确保DOM已渲染完成
      requestAnimationFrame(() => {
        const documentHeight = document.documentElement.scrollHeight;
        const windowHeight = window.innerHeight;
        const scrollY = parseFloat(scrollProgress) * (documentHeight - windowHeight);
        window.scrollTo({
          top: scrollY,
          behavior: 'smooth'
        });
      });
    }
  }, [location.search]);

  return <div>{/* 首页内容 */}</div>;
}

3. 优化scrollToProgress函数 #

将滚动位置计算逻辑放到执行阶段，避免提前计算导致的DOM未就绪问题：

const scrollToProgress = (progress) => {
  requestAnimationFrame(() => {
    const documentHeight = document.documentElement.scrollHeight;
    const windowHeight = window.innerHeight;
    const scrollY = progress * (documentHeight - windowHeight);
    window.scrollTo({
      top: scrollY,
      behavior: 'smooth'
    });
  });
};

4. 修正history.listen的使用方式 #

若坚持用监听方式，需确保路由跳转完成后再执行滚动，并及时清理监听：

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

function MenuComponent() {
  const history = useHistory();

  const handleScrollLinkClick = (targetProgress) => {
    history.push('/');
    const unlisten = history.listen((location, action) => {
      if (location.pathname === '/' && action === 'PUSH') {
        scrollToProgress(targetProgress);
        unlisten(); // 执行后移除监听，避免内存泄漏
      }
    });
  };

  // 组件卸载时清理可能残留的监听
  useEffect(() => {
    return () => {
      // 若存在未清理的监听，在此处理
    };
  }, []);

  return <div>{/* 菜单渲染 */}</div>;
}

关键注意点 #

• 滚动操作必须等待目标页面DOM完全渲染，否则文档高度计算会出错
• 必须规避react-router默认滚动行为的干扰
• 优先使用requestAnimationFrame替代固定时长的setTimeout，适配不同设备的渲染速度

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