在React Router Breadcrumb组件中重命名URL名称

如何解决在React Router Breadcrumb组件中重命名URL名称

我是React的新手，我正在尝试构建一个动态面包屑React组件，该组件可以检测到我在网站上的位置并进行显示。 这是我在此YouTube link中尝试过的代码：

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);

此代码对我来说很好用，但是我希望面包屑到达页面时显示特定的文本，例如，关于页面的网址是“ / about”，并且我想在面包屑上显示为“关于我们这样的：

首页/关于我们

我该怎么办？

解决方法

您可以检查URL的名称，如果它与“ about”匹配，则可以说应将“ About Us”作为输出。这可能不是100％完美的解决方案，但它会像这样工作：

{pathnames.map((name,index) => {
  const routeTo = `/${pathnames.slice(0,index + 1).join("/")}`;
  const isLast = index === pathnames.length - 1;
  return isLast ? (
    <Typography key={name}>
      { // change this line to this: }
      {name === "about" ? "About Us" : name}
    </Typography>
  ) : (
  <Link key={name} onClick={() => history.push(routeTo)}>
    {name}
  </Link>
  );
})}

如果路径为“关于”，则会显示“关于我们”而不是“关于”。对于其他情况，它将输出路径名。

如果要对多个页面执行此操作，则可以创建一个对象（在本例中称为“页面”），该对象的键为路径名，然后为其分配所需的值。像这样：

{pathnames.map((name,index + 1).join("/")}`;
  const isLast = index === pathnames.length - 1;
  const pages = { 'about': 'About Us','contact': 'Contact Us' };
  return isLast ? (
    <Typography key={name}>
      {pages[name]}
    </Typography>
  ) : (
    <Link key={name} onClick={() => history.push(routeTo)}>
      {name}
    </Link>
  );
})}