将使用 react-router v5 完成的 BreadCrumb 组件更改为 react router v6
Change BreadCrumb component that was done with react-router v5 to react router v6
我想将使用 react-router v5 完成的这个 BreadCrumb 组件更改为 react router v6。
import React from "react";
import {
Breadcrumbs as MUIBreadcrumbs,
Link,
Typography
} from "@material-ui/core";
import { withRouter } from "react-router-dom";
const Breadcrumbs = props => {
const {
history,
location: { pathname }
} = props;
const pathnames = pathname.split("/").filter(x => x);
return (
<MUIBreadcrumbs aria-label="breadcrumb">
{pathnames.length > 0 ? (
<Link onClick={() => history.push("/")}>Home</Link>
) : (
<Typography> Home </Typography>
)}
{pathnames.map((name, index) => {
const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
const isLast = index === pathnames.length - 1;
return isLast ? (
<Typography key={name}>{name}</Typography>
) : (
<Link key={name} onClick={() => history.push(routeTo)}>
{name}
</Link>
);
})}
</MUIBreadcrumbs>
);
};
export default withRouter(Breadcrumbs);
我尝试查找有关如何使用 withRouter
的信息,现在看来我们可以使用钩子,useLocation
和 useHistory
,因为我是 React 的新手,我不知道不知道如何实现这些,上面的代码在这个 sandbox.
关于这个 Breadcrumbs
组件,因为它是一个函数组件,您可以使用 React 挂钩。 v5 useHistory
钩子被 useNavigate
钩子取代,returns 一个 navigate
函数而不是一个 history
对象。 useLocation
挂钩 returns 相同的 location
对象。
示例:
import React from "react";
import {
Breadcrumbs as MUIBreadcrumbs,
Link,
Typography
} from "@material-ui/core";
import { useNavigate, useLocation } from "react-router-dom";
const Breadcrumbs = () => {
const navigate = useNavigate();
const { pathname } = useLocation();
const pathnames = pathname.split("/").filter(Boolean);
return (
<MUIBreadcrumbs aria-label="breadcrumb">
{pathnames.length ? (
<Link onClick={() => navigate("/")}>Home</Link>
) : (
<Typography> Home </Typography>
)}
{pathnames.map((name, index) => {
const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
const isLast = index === pathnames.length - 1;
return isLast ? (
<Typography key={name}>{name}</Typography>
) : (
<Link key={name} onClick={() => navigate(routeTo)}>
{name}
</Link>
);
})}
</MUIBreadcrumbs>
);
};
export default Breadcrumbs;
OFC 需要按照 upgrade from v5 升级应用程序的其余部分以使用 v6 组件 API,以便路由和导航以及访问旧的“路由道具”。
我想将使用 react-router v5 完成的这个 BreadCrumb 组件更改为 react router v6。
import React from "react";
import {
Breadcrumbs as MUIBreadcrumbs,
Link,
Typography
} from "@material-ui/core";
import { withRouter } from "react-router-dom";
const Breadcrumbs = props => {
const {
history,
location: { pathname }
} = props;
const pathnames = pathname.split("/").filter(x => x);
return (
<MUIBreadcrumbs aria-label="breadcrumb">
{pathnames.length > 0 ? (
<Link onClick={() => history.push("/")}>Home</Link>
) : (
<Typography> Home </Typography>
)}
{pathnames.map((name, index) => {
const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
const isLast = index === pathnames.length - 1;
return isLast ? (
<Typography key={name}>{name}</Typography>
) : (
<Link key={name} onClick={() => history.push(routeTo)}>
{name}
</Link>
);
})}
</MUIBreadcrumbs>
);
};
export default withRouter(Breadcrumbs);
我尝试查找有关如何使用 withRouter
的信息,现在看来我们可以使用钩子,useLocation
和 useHistory
,因为我是 React 的新手,我不知道不知道如何实现这些,上面的代码在这个 sandbox.
关于这个 Breadcrumbs
组件,因为它是一个函数组件,您可以使用 React 挂钩。 v5 useHistory
钩子被 useNavigate
钩子取代,returns 一个 navigate
函数而不是一个 history
对象。 useLocation
挂钩 returns 相同的 location
对象。
示例:
import React from "react";
import {
Breadcrumbs as MUIBreadcrumbs,
Link,
Typography
} from "@material-ui/core";
import { useNavigate, useLocation } from "react-router-dom";
const Breadcrumbs = () => {
const navigate = useNavigate();
const { pathname } = useLocation();
const pathnames = pathname.split("/").filter(Boolean);
return (
<MUIBreadcrumbs aria-label="breadcrumb">
{pathnames.length ? (
<Link onClick={() => navigate("/")}>Home</Link>
) : (
<Typography> Home </Typography>
)}
{pathnames.map((name, index) => {
const routeTo = `/${pathnames.slice(0, index + 1).join("/")}`;
const isLast = index === pathnames.length - 1;
return isLast ? (
<Typography key={name}>{name}</Typography>
) : (
<Link key={name} onClick={() => navigate(routeTo)}>
{name}
</Link>
);
})}
</MUIBreadcrumbs>
);
};
export default Breadcrumbs;
OFC 需要按照 upgrade from v5 升级应用程序的其余部分以使用 v6 组件 API,以便路由和导航以及访问旧的“路由道具”。