reactjs - 将使用 react-router v5 完成的 BreadCrumb 组件更改为 react router v6

Question

我想将使用 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 的信息，现在看来我们可以使用钩子(Hook)，useLocation 和 useHistory，因为我我是 React 的新手，我不知道如何实现这些，上面的代码在这个 sandbox 中.

Answer 1

关于这个 Breadcrumbs 组件，因为它是一个函数组件，您可以使用 React Hook 。 v5 useHistory Hook 已被 useNavigate Hook 取代，该 Hook 返回 navigate 函数而不是 history 对象。 useLocation Hook 返回相同的 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，以便路由和导航以及访问旧的“路由 Prop ”工作。