react-router-dom v6 升级答案

【问题标题】：react-router-dom v6 upgradereact-router-dom v6 升级
【发布时间】：2023-01-20 16:06:22
【问题描述】：

我们正在经历更新各种 NPM 包的过程，目前正在查看 react-router-dom v5 -> v6。文档非常好，但我看不出如何解释路线成分。

在 v5 中，我们有以下内容：

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

但“渲染”在 v6 中不再可用。我明白要求切换 -> 路由我需要介绍一下元素={}，但不确定如何构建面包屑数据，使其可用于组件二...将不胜感激任何建议和/或想法。

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您可以创建一个包装器组件来读取路径参数。

例子：

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

const Breadcrumb = ({ reviewsMenuPath }) => {
  const { acronym } = useParams();

  const breadcrumbs = [
    { text: 'Reviews' },
    { text: 'History', link: `/reviewer/${reviewsMenuPath}/history` },
    { key: match.params.acronym }
  ];

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

<Routes>
  ...
  <Route
    path={`/reviewer/${reviewsMenuPath}/history/:acronym`}
    element={<Breadcrumb reviewsMenuPath={reviewsMenuPath} />}
  />
  ...
</Routes>

另一种选择是将 useParams 和 const breadcrumbs 逻辑移动到 ComponentTwo 中。如果 ComponentTwo 已经是一个 React Function 组件，这很简单。如果它是一个 Class 组件，那么您需要将其转换为 Function 组件或创建一个 custom withRouter Higher Order Component 以访问 acronym 路径参数。

【讨论】：