React Router - 仅在路径参数存在时调用加载器函数

Question

我正在实现新的 React Router。我正在使用加载器函数来根据正在加载的元素来获取数据。

我想要发生的是，无论调用某些 api 的路线如何。如果 url 是某个路由，则应调用某些附加 api。

我遇到的问题是 url 路径参数是可选的。

在下面的实现中，当用户访问

/

时，只有

defaulNewAPIs

应该运行。问题是因为这些路径参数是可选的，两个加载器函数都会运行。

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 />
    </>
  )
}

Answer 1

路由加载器总是在路由加载时被调用，并且它们传递了路由参数，因此您可以在应用附加逻辑之前检查它们是否存在。

示例：

{
  element: <ReferralDetails status="new" />,
  path: '/:appTypeId?/:submissionId?',
  loader: ({ params }) => {
    const { appTypeId, submissionId } = params;
    if (appTypeId && submissionId) {
      return getSubmission(params);
    }
    return null;
  },
},