时间戳

首页 > 解决方案 > 带有 React Router 的 MUI 面包屑 - 自定义面包屑标签

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

问题描述

在这里，我在面包屑上使用 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);

一切都按预期工作，但面包屑的标签有问题。我有这 3 个页面，它们的链接如下："book-table", "food-delivery","sponsor"

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

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

我怎样才能像这样为每个面包屑定制标签？如果它在book-table页面上，它将显示如下：Home / Book a Table。如果它打开food-delivery，它将显示如下：Home / Order Food等等。

标签： reactjsmaterial-uireact-router-dom

解决方案

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

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

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

这样你的代码会更干净、更易读、更易于维护。例如：您可能希望根据用户的语言偏好更改标题，这样会比您决定采用的方法更容易。

希望有帮助

推荐阅读