React路由切换页面滚动到顶部常规方案失效问题求解

问题根因 #

你遇到的问题核心是两点：

• 滚动容器不是全局window对象，而是侧边栏外层的自定义Box元素，所以调用window.scrollTo自然不会生效
• 首次跳转时useEffect的执行时机早于页面内容的实际渲染完成，此时容器内容还没被撑开，调用scrollTo不会生效，等后续内容渲染完成容器高度变大后，就保留了之前的滚动位置

可靠解决方案 #

用嵌套的requestAnimationFrame替代固定超时的setTimeout，它会严格对齐浏览器的渲染周期，确保在页面内容完全渲染完成后再执行滚动，可靠性100%，也不会出现可见闪烁：

const MySidebar = <T extends Stuff>({
  children,
  stuff,
  title,
  type,
  handleBackClick,
}: Props<T>) => {
  const scrollRef = useRef<HTMLDivElement>(null);
  const location = useLocation();

  useEffect(() => {
    if (!scrollRef.current) return;
    // 两次requestAnimationFrame确保在DOM更新、内容绘制完成后执行滚动
    requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        scrollRef.current!.scrollTo(0, 0);
      });
    });
  }, [location.pathname]);

  return (
    <Box
      width="100%"
      height="100%"
      position="relative"
      zIndex="1"
      overflow="auto"
      ref={scrollRef}
    >
      {/* 原有业务代码 */}
    </Box>
  );
});

补充优化方案 #

如果你的子页面存在异步加载的内容（比如调用接口获取表单数据后再渲染），可以通过Context或者Props把滚动方法暴露给子页面，子页面在异步数据加载完成、内容渲染完成后主动触发滚动，能适配所有复杂场景。

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