React Router中如何条件禁用DOM变更时的自动回顶？

我完全懂你的痛点——在/explore这类父路由下切换子页面时，自动回顶会打断用户浏览节奏，体验确实很差。咱们可以通过判断路由的父路径是否变化来精准控制回顶行为，只在跨父路由跳转时触发回顶，同个父路由下的嵌套切换就跳过。

核心思路 #

我们需要对比当前路由和上一次路由的父路径：

• 如果父路径不同（比如从/explore跳转到/about），执行回顶逻辑
• 如果父路径相同（比如从/explore跳转到/explore/items），跳过回顶

修改后的ScrollToTop组件代码 #

针对React Router v6（推荐）

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

const ScrollToTop = () => {
  const location = useLocation();
  // 用useRef存储上一次的路径，避免组件渲染时重置
  const prevPathnameRef = useRef(location.pathname);

  useEffect(() => {
    // 浏览器前进后退（POP行为）保持默认滚动恢复，不强制回顶
    if (location.action === 'POP') {
      prevPathnameRef.current = location.pathname;
      return;
    }

    // 提取路由的父路径
    const getParentPath = (path) => {
      const pathSegments = path.split('/').filter(Boolean);
      // 根路径/或一级路由（如/about）的父路径就是自身；多级路由取第一级（如/explore/items的父路径是/explore）
      return pathSegments.length <= 1 ? path : `/${pathSegments[0]}`;
    };

    const currentParentPath = getParentPath(location.pathname);
    const prevParentPath = getParentPath(prevPathnameRef.current);

    // 只有父路径变化时，才执行回顶或锚点定位
    if (currentParentPath !== prevParentPath) {
      const hash = location.hash;
      if (hash) {
        const targetElement = document.querySelector(hash);
        if (targetElement) {
          targetElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
        }
      } else {
        window.scrollTo(0, 0);
      }
    }

    // 更新上一次的路径记录
    prevPathnameRef.current = location.pathname;
  }, [location]);

  return null;
};

export default ScrollToTop;

针对React Router v5

如果还在使用v5，只需把useLocation换成props传入的location即可：

import { useEffect, useRef } from 'react';

const ScrollToTop = (props) => {
  const prevPathnameRef = useRef(props.location.pathname);

  useEffect(() => {
    if (props.history.action === 'POP') {
      prevPathnameRef.current = props.location.pathname;
      return;
    }

    const getParentPath = (path) => {
      const pathSegments = path.split('/').filter(Boolean);
      return pathSegments.length <= 1 ? path : `/${pathSegments[0]}`;
    };

    const currentParentPath = getParentPath(props.location.pathname);
    const prevParentPath = getParentPath(prevPathnameRef.current);

    if (currentParentPath !== prevParentPath) {
      const hash = props.location.hash;
      if (hash) {
        const targetElement = document.querySelector(hash);
        if (targetElement) {
          targetElement.scrollIntoView({ block: 'start', behavior: 'smooth' });
        }
      } else {
        window.scrollTo(0, 0);
      }
    }

    prevPathnameRef.current = props.location.pathname;
  }, [props.location, props.history.action]);

  return null;
};

export default ScrollToTop;

更灵活的自定义控制 #

如果需要针对特定路径单独禁用回顶，可以维护一个白名单数组：

// 比如指定/explore下所有子路由都不回顶
const noScrollTopPrefixes = ['/explore'];

// 在useEffect里替换父路径判断逻辑
const shouldSkipScroll = noScrollTopPrefixes.some(prefix => location.pathname.startsWith(prefix));
if (!shouldSkipScroll) {
  // 执行回顶逻辑
}

使用方式 #

把组件放在BrowserRouter内部最外层即可：

// React Router v6
<BrowserRouter>
  <ScrollToTop />
  <Routes>
    {/* 你的路由配置 */}
  </Routes>
</BrowserRouter>

// React Router v5
<BrowserRouter>
  <ScrollToTop />
  <Switch>
    {/* 你的路由配置 */}
  </Switch>
</BrowserRouter>

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