Блог

Я новичок в React и пытаюсь создать динамический компонент React Breadcrumb, который определяет мое местоположение на веб-сайте и показывает его. Это код, который я пробовал по этой ссылке на YouTube:

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

Этот код хорошо работает со мной, но я хочу, чтобы в breadcrumb отображался определенный текст при переходе на страницу, например, если URL-адрес страницы about ‘/ about’, и я хочу показать его в breadcrumb как «О нас», например:

Главная / О нас

Как я могу это сделать?

Вы можете проверить имя 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. И в любом другом случае он будет выводить путь.

Если вы хотите сделать это для нескольких страниц, вы можете создать объект (в данном случае я назвал его «страницы»), где ключом является путь, а затем присвоить ему нужное значение. Вот так:

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