如何避免React Router 6中Layout的loader在子路由重定向时多次调用

我有如下路由配置：

const router = createBrowserRouter([
  {
    element: <Layout />,
    loader: loaderFunction,
    children: [
      {
        path: '/home',
        element: <HomePage />
      },
      {
        path: '/about',
        element: <AboutPage />
      },
      {
        path: '/contact',
        element: <ContactPage />
      },
    ],
    errorElement: <ErrorPage />
  },
  {
    path: '*',
    element: <NotFoundPage />
  }
]);

该配置以<Layout />作为父路由，包含多个子路由及对应组件。设计逻辑是用户直接访问这些路径时，都会触发loaderFunction获取数据，随后在<Layout />中解析分析数据，并根据条件进行重定向：

if (conditionA && pathname !== '/about') {
  return <Navigate to="/about" replace />
}

if (conditionB && pathname !== '/contact') {
  return <Navigate to="/contact" replace />
}

return <Outlet />;

但问题是重定向到子组件时，loaderFunction会被重复触发，导致多次服务器请求。请问是否有内置方案或更佳编程模式解决该问题？

1. 将重定向逻辑移至loader中处理 #

React Router的loader支持直接返回重定向响应，这是最适配的方案。loader在组件渲染前执行，且重定向到同分支子路由时，不会重复触发父路由的loader。修改代码如下：

async function loaderFunction({ request }) {
  // 获取数据
  const data = await fetchYourData();
  
  // 解析条件
  const conditionA = checkConditionA(data);
  const conditionB = checkConditionB(data);
  
  // 提取当前路径
  const pathname = new URL(request.url).pathname;
  
  // 触发重定向
  if (conditionA && pathname !== '/about') {
    return redirect('/about');
  }
  
  if (conditionB && pathname !== '/contact') {
    return redirect('/contact');
  }
  
  // 返回数据供组件使用
  return data;
}

这种方式下，重定向在路由解析阶段完成，组件渲染时已经处于目标路由，不会出现二次请求。

2. 给loader添加缓存逻辑 #

如果必须在组件内处理重定向，可以为loaderFunction添加缓存，避免重复请求服务器。比如使用内存缓存：

// 内存缓存存储已请求的数据
let loaderCache = null;

async function loaderFunction() {
  if (loaderCache) {
    return loaderCache;
  }
  const data = await fetchYourData();
  loaderCache = data;
  return data;
}

如果需要更严谨的缓存策略，可以根据请求参数、用户标识等生成唯一缓存key，避免不同场景下的缓存冲突。

3. 拆分路由结构，提升公共loader层级 #

如果loaderFunction负责获取全局公共数据，可以将其移至根路由层级，让所有子路由共享该数据，子路由切换时不会重复触发loader：

const router = createBrowserRouter([
  {
    loader: loaderFunction, // 全局公共loader
    children: [
      {
        element: <Layout />,
        children: [
          { path: '/home', element: <HomePage /> },
          { path: '/about', element: <AboutPage /> },
          { path: '/contact', element: <ContactPage /> },
        ],
        errorElement: <ErrorPage />
      },
      { path: '*', element: <NotFoundPage /> }
    ]
  }
]);

之后在<Layout>中通过useLoaderData()获取数据，再处理重定向逻辑即可。

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