React-Router嵌套路由重定向时如何跳过父路由loader？

在React Router的嵌套路由机制中，访问子路由时父路由的loader默认会优先执行——因为父路由的Element是子路由的渲染容器。要跳过父路由loader的核心数据获取逻辑，可以通过以下两种实现方式：

1. 通过请求URL路径判断跳过加载 #

在父路由的gameDetailsLoader中解析当前请求的URL，判断是否是跳转到postDelete路径，若是则跳过数据获取：

async function gameDetailsLoader({ params, request }) {
  const url = new URL(request.url);
  // 检查当前路径是否指向postDelete子路由
  if (url.pathname.endsWith(`${params.gameId}/postDelete`)) {
    // 返回父组件所需的最小结构，避免组件依赖报错
    return { gameId: params.gameId };
  }
  // 正常场景下加载游戏详情数据
  return fetch(`/api/games/${params.gameId}`).then(res => res.json());
}

2. 通过重定向参数精准控制跳过 #

在触发重定向的gameDetailsAction中添加自定义查询参数，父路由loader通过该参数判断是否跳过加载：

步骤1：修改Action中的重定向逻辑 #

async function gameDetailsAction({ params, request }) {
  // 执行删除操作
  await fetch(`/api/games/${params.gameId}`, { method: 'DELETE' });
  // 重定向时携带跳过父loader的标记参数
  return redirect(`/${params.gameId}/postDelete?skipParentLoader=true`);
}

步骤2：在父路由Loader中判断参数 #

async function gameDetailsLoader({ params, request }) {
  const url = new URL(request.url);
  const skipLoader = url.searchParams.get('skipParentLoader');
  
  if (skipLoader === 'true') {
    return { gameId: params.gameId };
  }
  
  // 正常加载逻辑
  return fetch(`/api/games/${params.gameId}`).then(res => res.json());
}

这两种方式都无需改动嵌套路由的结构，既保留了嵌套路由的合理性，又避免了删除数据后父loader因无法获取数据而报错的问题。

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