在 React Router Breadcrumb 组件中重命名 URL'name

Question

我是 React 的新手，我正在尝试构建一个 Dynamic Breadcrumb 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);

这段代码对我来说效果很好，但我希望面包屑在到达页面时显示特定文本，例如，如果关于页面的 url 是“/about”，我想在面包屑上显示为 'About Us'，如下所示：

Home / About Us

我该怎么做？

Answer 1

您可以检查 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>
  );
})}

如果路径是 'about'，它将显示 'About Us' 而不是 about。对于任何其他情况，它将输出路径名。

如果您想为多个页面执行此操作，您可以创建一个对象（在本例中我将其称为 'pages'），其中键是路径名，然后为其分配所需的值。像这样：

{pathnames.map((name, index) => {
  const routeTo = `/${pathnames.slice(0, 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>
  );
})}

在 React Router Breadcrumb 组件中重命名 URL'name

Rename the URL'name in React Router Breadcrumb component

breadcrumbs

reactjs

react-router