react-router-dom v5升级v6：Route组件render替代与面包屑构建问题

在 React Router v6 中，Switch 被替换为 Routes，render 属性被移除，路由内容统一通过 element 属性传递组件。针对你的场景，获取路由参数并构建面包屑可以通过以下两种方式实现：

方法1：封装独立组件，使用 useParams 钩子 #

将原本在 render 函数内的逻辑迁移到独立组件中，通过 useParams 直接获取路由参数，这是最推荐的写法，代码更易维护：

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

// 封装页面组件，包含面包屑逻辑
const HistoryReviewPage = () => {
  const { acronym } = useParams();
  const breadcrumbs = [
    { text: 'Reviews' },
    { text: 'History', link: `/reviewer/${reviewsMenuPath}/history` },
    { key: acronym, text: acronym } // 补充text字段，确保面包屑能正常显示内容
  ];

  return (
    <>
      <ComponentOne title="Your completed reviews" />
      <ComponentTwo
        acronym={acronym}
        key={acronym}
        breadcrumbs={breadcrumbs}
      />
    </>
  );
};

// 路由配置
<Routes>
  <Route
    path={`/reviewer/${reviewsMenuPath}/history/:acronym`}
    element={<HistoryReviewPage />}
  />
</Routes>

方法2：匿名组件内直接使用 useParams #

如果不想额外封装组件，也可以在 element 中用立即执行函数结合钩子实现：

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

<Routes>
  <Route
    path={`/reviewer/${reviewsMenuPath}/history/:acronym`}
    element={
      <>
        <ComponentOne title="Your completed reviews" />
        {(() => {
          const { acronym } = useParams();
          const breadcrumbs = [
            { text: 'Reviews' },
            { text: 'History', link: `/reviewer/${reviewsMenuPath}/history` },
            { key: acronym, text: acronym }
          ];
          return (
            <ComponentTwo
              acronym={acronym}
              key={acronym}
              breadcrumbs={breadcrumbs}
            />
          );
        })()}
      </>
    }
  />
</Routes>

核心要点 #

• v6 彻底移除了 match 对象，路由参数必须通过 useParams 钩子获取
• 面包屑的构建逻辑完全可以迁移到组件内部，避免路由配置过于臃肿
• 优先选择方法1，独立组件的写法更利于后续的调试和功能扩展

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