React Router优化：仅当存在路径参数时调用loader函数

问题描述 #

使用新版React Router时，通过loader函数按需获取数据：

• 所有路由都需要调用defaulNewAPIs
• 仅访问带参数的特定路由时，才额外调用getSubmission

但因为路径参数设为可选（/:appTypeId?/:submissionId?），访问根路径/时，子路由的loader也会执行，导致getSubmission收到null参数，不符合预期。

当前路由配置：

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    id: 'root',
    loader: () => defaulNewAPIs(),
    children: [
      {
        index: true,
        element: <ReferralDetails status="new" />,
        path: '/:appTypeId?/:submissionId?',
        loader: ({ params }) => getSubmission(params),
      },
    ],
  },
])

参数设为可选的原因是AppLayout需要根据参数是否存在条件渲染头部：

const AppLayout: React.FC<AppProps> = ({ msalContext }: AppProps) => {
  const { appTypeId } = useParams()
  const currentUser = { name: msalContext.accounts[0].name }

  return (
    <>
      {!appTypeId && (
        <AppHeader
          appName="REFERRALS"
          currentUser={currentUser}
          notificationNumber="4"
        />
      )}
      <Outlet />
    </>
  )
}

解决方案 #

方案1：在loader内部添加参数判断 #

直接修改子路由的loader，仅当参数存在时才调用API：

loader: ({ params }) => {
  // 任意参数存在时执行API调用
  if (params.appTypeId || params.submissionId) {
    return getSubmission(params);
  }
  // 参数为空时返回null，不触发API请求
  return null;
}

这种方式无需改动路由结构，仅需在现有loader中增加判断逻辑，简单高效。

方案2：拆分路由结构（更清晰） #

将路由拆分为无参数和有参数的两个分支，明确各自的loader触发条件：

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    id: 'root',
    loader: () => defaulNewAPIs(),
    children: [
      // 根路径对应的子路由，无额外loader
      {
        index: true,
        element: <ReferralDetails status="new" />,
      },
      // 带完整参数的路径，触发getSubmission
      {
        path: '/:appTypeId/:submissionId',
        element: <ReferralDetails status="new" />,
        loader: ({ params }) => getSubmission(params),
      },
      // 仅带appTypeId的路径（如果需要支持）
      {
        path: '/:appTypeId',
        element: <ReferralDetails status="new" />,
        loader: ({ params }) => getSubmission(params),
      },
    ],
  },
])

该方案路由职责划分明确，避免了可选参数带来的loader误触发问题，适合需要清晰路由结构的场景。

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