带有React Router的MUI面包屑-定制面包屑标签
带有React Router的MUI面包屑-定制面包屑标签
提问于 2020-07-05 19:52:46
这里，我在breadcrumbs和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等等。
Stack Overflow用户
发布于 2020-07-05 20:00:42
由于没有清晰的模式可用于转换路径名，因此我建议创建一个config对象并对其进行迭代，例如：
const routes = [{
path: '/book-table',
title: 'Book Table'
}]
return routers.map(x => return <SomeBreadcumb route={x.route}>{x.title}</SomeBreadcumb>)
这样你的代码会更整洁，更易读，更容易维护。例如:您可能希望根据用户的语言偏好更改标题，这样会比您决定采用的方法更容易。
希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62740315
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号