React中如何实现仅指定路由触发ScrollToTop，而非全链路生效

核心逻辑 #

全局包裹路由层默认触发滚动到顶逻辑，仅对特殊场景做排除，无需逐个给链接绑定事件，维护成本极低。

React + React Router v6 具体实现 #

第一步：编写全局ScrollToTop组件 #

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

// 配置不需要触发回顶的规则，支持精确路径匹配、正则匹配
const SKIP_SCROLL_RULES = [
  '/popup-dialog', // 匹配精确路径
  /^\/list\?.*tag=/, // 匹配带指定查询参数的列表页
];

const ScrollToTop = ({ children }) => {
  const location = useLocation();
  // 跳转类型：PUSH(新打开)/REPLACE(替换当前)/POP(前进后退)
  const navType = useNavigationType();

  useEffect(() => {
    // 校验是否需要跳过回顶
    const needSkip = SKIP_SCROLL_RULES.some(rule => {
      if (typeof rule === 'string') return location.pathname === rule;
      return rule.test(location.pathname + location.search);
    }) 
    // 可选：前进后退操作默认保留原有滚动位置，不需要可删除该行
    || navType === 'POP'
    // 可选：支持跳转时通过state传参标记跳过
    || location.state?.skipScroll;

    if (!needSkip) {
      window.scrollTo({
        top: 0,
        left: 0,
        // 不需要平滑滚动可删除behavior参数
        behavior: 'smooth'
      });
    }
  }, [location.pathname, location.search, location.state]);

  return children;
};

export default ScrollToTop;

第二步：全局包裹路由 #

在项目根路由外层套上该组件即可全局生效：

import { BrowserRouter } from 'react-router-dom';
import ScrollToTop from './components/ScrollToTop';
import App from './App';

function Root() {
  return (
    <BrowserRouter>
      <ScrollToTop>
        <App /> {/* 所有路由定义放在App内部即可 */}
      </ScrollToTop>
    </BrowserRouter>
  );
}

其他框架适配思路 #

• Vue项目：在Vue Router的全局afterEach守卫中写相同的排除逻辑，符合条件时执行滚动到顶即可，可通过路由meta配置跳过标记
• 原生/其他框架：监听全局路由变化事件，复用上面的排除规则逻辑即可

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