仅当面包屑上的标签与链接 URL 不同时才需要面包屑名称映射（例如，路径“/level1”在面包屑中显示为“Level 1”。

这是与react-router集成的 Material UI Breadcrumb 示例的修改版本。

在这里试试完整的程序 https://codesandbox.io/s/dark-architecture-sgl12?fontsize=14

https://sgl12.codesandbox.io/level1/level2

import React from 'react';
import Breadcrumbs from '@material-ui/core/Breadcrumbs';
import Typography from '@material-ui/core/Typography';
import { Link as RouterLink } from 'react-router-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';

function SimpleBreadcrumbs() {
  return <Route>
    {({ location }) => {
      const pathnames = location.pathname.split('/').filter(x => x);
      return (
        <Breadcrumbs aria-label="Breadcrumb">
          <RouterLink color="inherit" to="/">
            Home
            </RouterLink>
          {pathnames.map((value, index) => {
            const last = index === pathnames.length - 1;
            const to = `/${pathnames.slice(0, index + 1).join('/')}`;

            return last ? (
              <Typography color="textPrimary" key={to}>
                {value}
              </Typography>
            ) : (
                <RouterLink color="inherit" to={to} key={to}>
                  {value}
                </RouterLink>
              );
          })}
        </Breadcrumbs>
      );
    }}
  </Route>

}

export default function App() {
  return <div>
    <Router>
      <SimpleBreadcrumbs />

      <Route path='/' exact component={Home}></Route>
      <Route path='/level1' exact component={Level1}></Route>
      <Route path='/level1/level2' exact component={Level2}></Route>

    </Router>
  </div>
}

我编辑了 Meera 的很棒的代码来解决我面临的一些问题：我想要标题大写的链接而不是小写的。我添加了 useLocation 挂钩，并做了一些其他更改。

import React from 'react'
import { useLocation, Link as RouterLink } from 'react-router-dom'
import { Breadcrumbs, Typography, Link } from '@material-ui/core'

function toTitleCase(str) {
  return str.replace(/\b\w+/g, function (s) {
    return s.charAt(0).toUpperCase() + s.substr(1).toLowerCase()
  })
}

export default function () {
  let location = useLocation()
  const pathnames = location.pathname.split('/').filter((x) => x)

  return (
    <Breadcrumbs aria-label='Breadcrumb'>
      <Link color='inherit' component={RouterLink} to='/'>
        Home
      </Link>
      {pathnames.map((value, index) => {
        const last = index === pathnames.length - 1
        const to = `/${pathnames.slice(0, index + 1).join('/')}`

        return last ? (
          <Typography color='textPrimary' key={to}>
            {toTitleCase(value)}
          </Typography>
        ) : (
          <Link color='inherit' component={RouterLink} to='/' key={to}>
            {toTitleCase(value)}
          </Link>
        )
      })}
    </Breadcrumbs>
  )
}

我决定发布一个单独的答案，而不是对您的代码发表评论，Meera。谢谢您的帮助。我修改了地图功能的正文部分并添加了翻译功能。可悲的是，它不适用于我的 react hooks 功能，所以这就是我将其转换为类组件的原因。

我的组件现在看起来像这样：

import React, { PureComponent } from "react";
import * as PropTypes from "prop-types";
import { Breadcrumbs, Link, Paper, Typography } from "@material-ui/core";
import { connect } from "react-redux";
import { Route, Link as RouterLink } from "react-router-dom";

import { LanguageActions } from "../../redux/actions";

/**
 * This component has to be a class component to be able
 * to translate the path values dynamically.
 * React hooks are not working in this case.
 */
class SimpleBreadcrumbs extends PureComponent {
    render = () => {
        const { translate } = this.props;
        const LinkRouter = props => <Link {...props} component={RouterLink} />;

        return (
            <Paper elevation={0} style={{ padding: "8px 16px" }}>
                <Route>
                    {({ location }) => {
                        const pathnames = location.pathname
                            .split("/")
                            .filter(x => x);
                        return (
                            <Breadcrumbs aria-label="Breadcrumb">
                                <LinkRouter
                                    color="inherit"
                                    component={RouterLink}
                                    to="/"
                                >
                                    Home
                                </LinkRouter>
                                {pathnames.map((value, index) => {
                                    const last = index === pathnames.length - 1;
                                    const to = `/${pathnames
                                        .slice(0, index + 1)
                                        .join("/")}`;

                                    // Split value so the string can be transformed and parsed later.
                                    const path = value.split("-");
                                    // Convert first char of string to uppercase.
                                    path.forEach((item, i) => {
                                        // Only capitalize starting from the second element.
                                        if (i > 0) {
                                            path[i] =
                                                path[i]
                                                    .charAt(0)
                                                    .toUpperCase() +
                                                path[i].slice(1);
                                        }
                                    });

                                    return last ? (
                                        <Typography
                                            color="textPrimary"
                                            key={to}
                                        >
                                            {translate(path.join(""))}
                                        </Typography>
                                    ) : (
                                        <LinkRouter
                                            color="inherit"
                                            to={to}
                                            key={to}
                                        >
                                            {translate(path.join(""))}
                                        </LinkRouter>
                                    );
                                })}
                            </Breadcrumbs>
                        );
                    }}
                </Route>
            </Paper>
        );
    };
}

// To be able to translate every breadcrumb step,
// translations have to be passed down to this component.
// Otherwise the component does not get notified
// if user decides to switch language
const connector = connect(
    ({ translations }) => ({ translations }),
    dispatch => ({
        translate: key => dispatch(LanguageActions.translate(key)),
    })
);

SimpleBreadcrumbs.propTypes = {
    translate: PropTypes.func,
};

SimpleBreadcrumbs.defaultProps = {
    translate: () => {},
};

export default connector(SimpleBreadcrumbs);