React路由切换时ScrollToTop组件无法滚动到顶部问题求助

你的基础写法符合官方规范，不生效通常是以下4种场景导致，对应解决方案如下：

1. 滚动容器不是window #

绝大多数人遇到这个问题都是这个原因：如果你给html、body或者项目外层容器设置了height: 100%、overflow: auto这类样式，实际产生滚动行为的是这个自定义容器而非window对象，调用window.scrollTo自然没有效果。

解决代码： #

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

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

  useEffect(() => {
    // 兼容window、body滚动场景
    window.scrollTo(0, 0);
    document.documentElement.scrollTo(0, 0);
    document.body.scrollTo(0, 0);
    // 如果是自定义容器滚动，替换下面选择器为你的容器对应的选择器即可
    document.querySelector('.你的滚动容器选择器')?.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

2. 触发时机早于组件渲染 #

useEffect的触发时机在新路由组件渲染完成之前，此时页面内容高度还没更新，滚动操作会被后续渲染的内容顶回原位置。

解决代码： #

添加延迟或者用requestAnimationFrame保证渲染完成后再执行滚动：

useEffect(() => {
  // 方案1：加0延迟推入异步队列，等渲染完成后执行
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 0);

  // 方案2：用requestAnimationFrame在下一渲染帧执行
  // requestAnimationFrame(() => {
  //   window.scrollTo(0, 0);
  // })
}, [pathname]);

3. 路由监听维度不够 #

如果你的项目用到hash路由、带锚点的跳转，仅监听pathname不会触发effect，因为只有hash变化时pathname是不变的。另外部分旧版本React Router的pathname更新时机存在异常。

解决代码： #

改为监听整个location对象：

const location = useLocation();
useEffect(() => {
  window.scrollTo(0, 0);
}, [location]);

4. 存在其他滚动逻辑冲突 #

检查项目中是否有其他全局滚动监听、组件内渲染完成后修改滚动位置的逻辑，这类逻辑执行顺序晚于你的ScrollToTop逻辑，会覆盖滚动到顶部的操作。你的ScrollToTop组件放在Router内部顶层的写法是正确的，不需要调整位置。

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