如何在React-Router中使用自定义ScrollToTop组件时阻止特定链接触发滚动到顶部

嘿，这个问题我之前也碰到过！核心思路就是给你的ScrollToTop组件加个判断逻辑，区分需要滚动和不需要滚动的路由场景，下面给你两种实用的解决方案：

方案一：通过路径规则批量控制 #

如果你的category路由有统一的路径模式（比如/:category这种单级动态路由），可以直接在ScrollToTop里匹配路径，跳过滚动逻辑：

export const ScrollToTop = () => {
  const { pathname } = useLocation();

  useEffect(() => {
    // 正则匹配单级路径（比如 /electronics、/clothing 这类category路由）
    const isCategoryRoute = /^\/[^\/]+$/.test(pathname);

    // 只有不是category路由时，才滚动到顶部
    if (!isCategoryRoute) {
      window.scrollTo(0, 0);
    }
  }, [pathname]);

  return null;
};

你可以根据实际路由结构调整正则：比如如果category路由是/categories/:name，就把正则改成/^\/categories\/[^\/]+$/，这样就能精准匹配到需要跳过的路径。

方案二：通过路由state精确控制单个链接 #

如果需要更灵活地控制某几个特定链接（而非批量路径），可以在跳转时给路由传递一个自定义state，让ScrollToTop根据这个state判断是否滚动：

首先，在跳转category的Link组件里添加state：

// 比如你的category列表项跳转
<Link to={`/${categoryName}`} state={{ skipScroll: true }}>
  {categoryName}
</Link>

然后修改ScrollToTop组件，读取路由的state：

export const ScrollToTop = () => {
  const { pathname, state } = useLocation();

  useEffect(() => {
    // 如果state里标记了skipScroll为true，就跳过滚动
    if (!state?.skipScroll) {
      window.scrollTo(0, 0);
    }
  }, [pathname, state]);

  return null;
};

这种方式的好处是，不管路径是什么，只要你在跳转时加上这个state，就能阻止滚动，非常适合需要精细化控制的场景。

备注：内容来源于stack exchange，提问作者Andrian