如何在React Router子路由loader中访问父路由loader的数据？

可以实现，但不能用useRouteLoaderData（它是React Hook，仅能在组件或自定义Hook中使用），推荐两种实用方案：

1. 缓存请求结果，复用已加载数据 #

给根路由的请求逻辑添加缓存机制，子路由loader调用同一请求函数时，直接返回已缓存的结果，避免重复发起网络请求：

// 缓存用户数据，避免重复请求
let cachedUser;

async function fetchUser() {
  if (cachedUser) return cachedUser;
  const res = await fetch("/api/user");
  cachedUser = await res.json();
  return cachedUser;
}

// 根路由loader
function rootLoader() {
  return fetchUser();
}

// 子路由loader
async function loadJob({ params }) {
  // 调用fetchUser，直接获取根路由已加载缓存的用户数据
  const user = await fetchUser();
  // 基于用户数据请求对应职位信息
  const jobRes = await fetch(`/api/jobs/${params.jobId}?userId=${user.id}`);
  return jobRes.json();
}

2. 全局状态管理（可选） #

如果你的应用已经使用了Redux、Zustand等全局状态库，可以在根路由loader中将数据存入全局状态，子路由loader直接从全局状态读取数据即可。这种方式适合需要在多个路由或组件间共享数据的场景。

注意：缓存方案需要考虑数据时效性，比如用户登出或数据更新时，要及时清空缓存，避免使用过期数据。

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