Question

在这里，我通过MUI和React路由器在面包屑上实现了。

import React from "react";
import {
  Breadcrumbs as AppBreadcrumbs,
  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 (
    <AppBreadcrumbs aria-label="breadcrumb">
      <Link onClick={() => history.push("/")}>Home</Link>
      {pathnames.map((name, index) => {
        const goTo = `/${pathnames.slice(0, index + 1).join("/")}`;
        const active = index === pathnames.length - 1;
        return active ? (
          <Typography>{name}</Typography>
        ) : (
          <Link onClick={() => history.push(goTo)}>{name}</Link>
        );
      })}
    </AppBreadcrumbs>
  );
};

export default withRouter(Breadcrumbs);

一切正常，但是面包屑的标签出现问题。我有这三个页面，它们的链接是这样的："book-table"，"food-delivery"，"sponsor"

这就是它们在我的页面上显示的方式：

Home / book-table
Home / food-delivery
Home / sponsor

如何为每个面包屑自定义标签？如果在book-table页面上，它将显示为：Home / Book a Table。如果在food-delivery上，它将显示为：Home / Order Food，依此类推。

Answer 1

由于没有明确的模式可用于转换路径名，因此建议创建一个配置对象并对其进行迭代，例如：

const routes = [{
  path: '/book-table',
  title: 'Book Table'
}]

return routers.map(x => return <SomeBreadcumb route={x.route}>{x.title}</SomeBreadcumb>)

这样，您的代码将更清晰，更具可读性和可维护性。例如：您可能想根据用户的语言偏好来更改标题，这样比您决定采用的方法容易。

希望有帮助

带有React Router的MUI面包屑-自定义面包屑标签

1 个答案: