React Router Dom如何根据路径参数条件渲染Header组件？

你可以通过以下两种方式实现根据可选路径参数/:appTypeId?是否存在，来决定是否在<ReferralDetails />上方渲染<Header />：

方法一：在目标组件内部处理条件渲染 #

直接在<ReferralDetails />组件中通过useParams钩子获取路径参数，然后条件渲染<Header />：

1. 路由配置保持原有结构 #

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import ReferralDetails from './ReferralDetails';

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

function App() {
  return <RouterProvider router={router} />;
}

export default App;

2. 修改ReferralDetails组件 #

import { useParams } from 'react-router-dom';
import Header from './Header';

function ReferralDetails({ status }) {
  const { appTypeId } = useParams();

  return (
    <div>
      {/* 仅当appTypeId参数存在时渲染Header */}
      {appTypeId && <Header />}
      {/* 原有组件内容 */}
      <div>Referral Details (Status: {status})</div>
      {/* 其他业务逻辑代码 */}
    </div>
  );
}

export default ReferralDetails;

方法二：用包装组件统一处理路由布局 #

如果不想改动<ReferralDetails />原组件，可以创建一个包装组件，在其中处理参数判断和组件组合：

1. 定义路由包装组件 #

import { createBrowserRouter, RouterProvider, useParams } from 'react-router-dom';
import ReferralDetails from './ReferralDetails';
import Header from './Header';

// 专门的布局组件，负责条件渲染Header
function ReferralLayout() {
  const { appTypeId } = useParams();
  
  return (
    <div>
      {appTypeId && <Header />}
      <ReferralDetails status="new" />
    </div>
  );
}

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

function App() {
  return <RouterProvider router={router} />;
}

export default App;

注意事项 #

• useParams返回的参数为字符串类型，当路径中没有appTypeId部分时，该参数为undefined，因此appTypeId && <Header />的判断逻辑可以准确触发条件渲染。
• 方法一适合组件本身需要使用appTypeId参数的场景，方法二更适合复用布局逻辑或避免修改原组件的场景。

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