React Router同路由跳转重复触发Loader如何避免？

当你在当前路由（比如/teacher）点击指向同一路由的链接时，React Router默认会重新运行所有匹配的loader，包括父级的rootLayoutLoader和当前路由的commonPageLoader。以下是几种可行的解决方案，既能保证必要数据正常获取，又能避免不必要的重复加载：

方法一：使用shouldRevalidate控制Loader重运行 #

React Router提供了shouldRevalidate路由配置项，允许你自定义判断逻辑，决定是否重新运行loader。通过对比当前路径和目标路径，仅当路径发生变化时才触发loader。

修改你的路由配置如下：

const router = createBrowserRouter([    
  {
    path: "/",
    loader: rootLayoutLoader,
    element: <RootLayout />,
    // 父路由仅在根路径变化时重新加载
    shouldRevalidate: ({ currentUrl, nextUrl }) => {
      return currentUrl.pathname !== nextUrl.pathname;
    },
    children: [
      {
        path: "student",
        loader: commonPageLoader,
        element: <Student />,
        // 子路由仅在路径不同时重新加载
        shouldRevalidate: ({ currentUrl, nextUrl }) => {
          return currentUrl.pathname !== nextUrl.pathname;
        },
      },
      {
        path: "teacher",
        loader: commonPageLoader,
        element: <Teacher />,
        shouldRevalidate: ({ currentUrl, nextUrl }) => {
          return currentUrl.pathname !== nextUrl.pathname;
        },
      },
    ],
  },
]);

这个配置下，当点击同路由链接时，shouldRevalidate返回false，loader不会被重复触发；只有当导航到不同路径时，才会重新获取数据。

方法二：自定义Link组件阻止同路由导航 #

从导航源头入手，当点击的链接指向当前路由时，阻止默认的导航行为，自然就不会触发loader重运行。

创建一个自定义的CustomLink组件：

import { Link, useLocation } from "react-router-dom";

const CustomLink = ({ to, ...props }) => {
  const location = useLocation();
  
  const handleClick = (e) => {
    // 判断目标路径是否和当前路径一致，一致则阻止导航
    const targetPath = typeof to === "string" ? to : to.pathname;
    if (targetPath === location.pathname) {
      e.preventDefault();
    }
  };

  return <Link to={to} onClick={handleClick} {...props} />;
};

之后所有内部导航都使用CustomLink替代原生Link，就能避免同路由的无效导航。

方法三：在Loader内部实现数据缓存 #

如果需要保留数据缓存逻辑（比如允许在特定场景下更新数据），可以在loader函数内部添加缓存机制，判断当前请求路径是否已有缓存数据，有则直接返回缓存，无则发起新请求。

以commonPageLoader为例：

// 全局缓存对象，可根据需求扩展缓存失效逻辑（比如时间戳）
const pageDataCache = { path: "", data: null };

async function commonPageLoader({ request }) {
  const currentPath = new URL(request.url).pathname;
  
  // 如果当前路径已有缓存数据，直接返回
  if (pageDataCache.path === currentPath && pageDataCache.data) {
    return pageDataCache.data;
  }
  
  // 无缓存则发起API请求
  const response = await fetch(`/api${currentPath}`);
  const data = await response.json();
  
  // 更新缓存
  pageDataCache.path = currentPath;
  pageDataCache.data = data;
  
  return data;
}

这种方式适合需要复用数据，但又要在路径变化时重新获取的场景，注意如果数据需要实时更新，要添加缓存失效的判断（比如定时清除缓存，或者在特定操作后手动清除）。

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