React Router v6数据路由：嵌套路由如何获取上级Loader数据？

问题复盘 #

1. 第一种配置问题：使用/animals/*通配符路由+组件内部<Routes>时，组件内的路由loader不会被React Router的路由系统触发——因为loader仅对createBrowserRouter定义的顶层路由树生效，组件内嵌套路由不属于这个体系，所以dogLoader未执行。
2. 第二种配置问题：嵌套路由结构正确，但React Router默认并行加载所有匹配路由的loader，导致animalsLoader与dogLoader同时执行，无法满足"子loader等待父loader完成并获取其数据"的需求。

解决方案 #

方案1：利用parentData实现顺序执行与数据传递 #

React Router的loader函数会接收上下文参数，其中parentData就是父路由loader的返回结果。React Router内部会确保父路由loader执行完成后，子路由才能访问到parentData，直接在子loader中使用即可（显式await可增强代码可读性）。

代码示例：

// 父路由授权loader
async function animalsLoader() {
  // 模拟授权验证/数据请求
  await new Promise(resolve => setTimeout(resolve, 1000));
  return { authPassed: true, userId: "123" };
}

// 子路由loader
async function dogLoader({ params, parentData }) {
  // 等待父路由数据加载完成（可选，parentData已确保是父loader执行后的结果）
  const parentResult = await parentData;
  
  // 使用父路由返回的数据
  console.log("父路由授权信息:", parentResult);
  
  // 子路由自身数据逻辑
  return { dogId: params.animalId, name: "旺财" };
}

// 正确的嵌套路由配置
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<DataLayout />}>
      <Route path="fruits" element={<>{/* Fruits内容 */}</>} />
      <Route path="401" element={<>{/* 未授权页面 */}</>} />
      <Route path="animals" loader={animalsLoader} id="animals">
        <Route path=":animalId">
          <Route path="dog" element={<Dog />} loader={dogLoader} />
          <Route path="cat" element={<Cat />} />
        </Route>
      </Route>
    </Route>
  )
);

方案2：父路由处理授权，子路由依赖授权结果 #

如果animalsLoader的核心是授权验证，可在父路由中直接处理授权失败的情况（如重定向到401），这样只有授权通过后，子路由的loader才会触发，天然实现顺序执行。

代码示例：

async function animalsLoader({ request }) {
  // 实际项目中替换为真实授权逻辑
  const isAuthorized = await checkUserAuth(request);
  
  if (!isAuthorized) {
    // 授权失败重定向到401
    return redirect("/401");
  }
  
  // 返回授权通过后的用户数据
  return { userInfo: { name: "admin" } };
}

async function dogLoader({ params, parentData }) {
  // 直接使用父路由返回的授权数据
  const { userInfo } = parentData;
  
  // 子路由数据请求，可携带用户信息
  const dogDetail = await fetch(`/api/dogs/${params.animalId}`, {
    headers: { Authorization: `Bearer ${userInfo.token}` }
  });
  
  return dogDetail.json();
}

补充说明 #

组件内部嵌套路由（第一种配置）仅适合简单的客户端路由场景，无法利用React Router的loader、action等核心特性。对于需要授权验证、数据预加载的场景，推荐使用第二种顶层嵌套路由结构，配合parentData实现路由间的数据依赖与顺序执行。

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