React Router Dom 有条件渲染元素

Question

我正在建立一个新项目并使用最新版本的

react-router-dom

。他们的文档建议使用我正在努力实现的

createBrowserRouter

。

我想要实现的是根据路径参数渲染不同的标头。

目前我正在使用可选路径参数：

const router = createBrowserRouter([
  {
    path: '/:appTypeId?',
    element: <ReferralDetails status="new" />,
  },
])

现在，如果提供了

appTypeId

，我想将我的

<Header />

组件渲染在我的

<ReferralDetails />

组件上方。

类似：

<>
  <Header />
  <ReferralDetails />
</>

我有什么想法可以做到这一点吗？

Answer 1

创建一个路由组件，可以读取可选的

appTypeId

路径参数并有条件地渲染

Header

。

示例：

const Referrals = (props) => {
  const { appTypeId } = useParams();

  return (
    <>
      {appTypeId && <Header />}
      <ReferralDetails {...props} />
    </>
  );
};

const router = createBrowserRouter([
  {
    path: '/:appTypeId?',
    element: <Referrals status="new" />,
  },
]);

为了更灵活一点，您可以考虑布局路由组件。

示例：

import { Outlet, useParams } from 'react-router-dom';

const AppLayout = (props) => {
  const { appTypeId } = useParams();

  return (
    <>
      {appTypeId && <Header />}
      <Outlet />
    </>
  );
};

const router = createBrowserRouter([
  {
    path: '/:appTypeId?',
    element: <AppLayout />,
    children: [
      {
        index: true,
        element: < ReferralDetails status="new" />,
      },
      ... other routes with conditional header
    ],
  },
]);