[英]react-router-dom v6 upgrade
We're going through the process of updating various NPM packages and currently looking at react-router-dom v5 -> v6.我们正在经历更新各种 NPM 包的过程,目前正在查看 react-router-dom v5 -> v6。 The documentation is pretty good, but I cant see how to account for some changes in the Route component.
文档非常好,但我看不到如何解释Route组件中的一些更改。
In v5 we had the following:在 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}
/>
</>
);
}}
/>
but 'render' is no longer available in v6.但“渲染”在 v6 中不再可用。 I understand the requirement for Switch -> Routes and that I'll need to introduce element={} , but am unsure how to construct the breadcrumbs data so that its available for ComponentTwo ...would appreciate any suggestions and/or thoughts.
我了解Switch -> Routes的要求,并且我需要引入element={} ,但我不确定如何构建面包屑数据,以便它可用于ComponentTwo ...将不胜感激任何建议和/或想法。
You can create a wrapper component that reads the path params.您可以创建一个包装器组件来读取路径参数。
Example:例子:
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>
Another alternative is to move the useParams
and const breadcrumbs
logic into ComponentTwo
.另一种选择是将
useParams
和const breadcrumbs
逻辑移动到ComponentTwo
中。 This is easy and trivial if ComponentTwo
is already a React Function component.如果
ComponentTwo
已经是一个 React Function 组件,那么这很简单。 If it is a Class component then you'd need to either convert it to a Function component or create a custom withRouter
Higher Order Component in order to access the acronym
path parameter.如果它是 Class 组件,那么您需要将其转换为 Function 组件或创建自定义
withRouter
高阶组件,以便访问acronym
路径参数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.