react-router-dom v6 升级

Question

我们正在经历更新各种 NPM 包的过程，目前正在查看 react-router-dom v5 -> v6。 文档非常好，但我看不到如何解释Route组件中的一些更改。

在 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 中不再可用。 我了解Switch -> Routes的要求，并且我需要引入element={} ，但我不确定如何构建面包屑数据，以便它可用于ComponentTwo ...将不胜感激任何建议和/或想法。

Answer 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 组件或创建自定义withRouter高阶组件，以便访问acronym路径参数。