Material-UI 面包屑导航与反应路由器集成

2024-04-02

我正在尝试将 Material-UI 面包屑与反应路由器一起使用。我如何以编程方式检测当前路线。

在 Material-UI 网站上有一个关于如何使用它的示例,但它需要使用静态 breadcrumbNameMap。我已经尝试使用 HOC“withRouter”来分割路径名,但它不起作用。

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Breadcrumbs, Link, Paper, Typography} from "@material-ui/core";

import { withRouter } from "react-router-dom";

import { useTranslation } from "../Translate";

const useStyles = makeStyles(theme => ({
    root: {
        justifyContent: "center",
        flexWrap: "wrap",
    },
    paper: {
        padding: theme.spacing(1, 2),
    },
}));

const breadcrumbNameMap = {
    "/inbox": "Inbox",
    "/inbox/important": "Important",
    "/trash": "Trash",
    "/spam": "Spam",
    "/drafts": "Drafts",
};

function SimpleBreadcrumbs(props) {
    const classes = useStyles();
    console.log("Breadcrumbs", props);
    const { location } = props;
    const pathnames = location.pathname.split("/").filter(x => x);
    console.log("pathnames", pathnames);

    return (
        <div className={classes.root}>
            <Paper elevation={0} className={classes.paper}>
                <Breadcrumbs aria-label="Breadcrumb">
                    <Link color="inherit" href="/">
                        Home
                    </Link>
                    {pathnames.map((value, index) => {
                        const last = index === pathnames.length - 1;
                        const to = `/${pathnames
                            .slice(0, index + 1)
                            .join("/")}`;

                        console.log("last", last, "to", to);

                        const path = value.split("-");
                        console.log("path", path);
                        // 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 (
                        //     <Typography color="textPrimary" key={to}>
                        //         {useTranslation(path.join(""))}
                        //     </Typography>
                        // );

                        // // return (
                        // //     <Typography color="textPrimary" key={to}>
                        // //         {pathnames[to]}
                        // //     </Typography>
                        // // );

                        return last ? (
                            <Typography color="textPrimary" key={to}>
                                {breadcrumbNameMap[to]}
                            </Typography>
                        ) : (
                            <Link color="inherit" to={to} key={to}>
                                {useTranslation(path.join(""))}
                            </Link>
                        );
                    })}
                </Breadcrumbs>
            </Paper>
        </div>
    );
}

export default withRouter(SimpleBreadcrumbs);

如果我的浏览器中的 URL 指向“http://example.com/level1/level2 http://example.com/level1/level2”,我预计面包屑的输出是:

主页 / 一级 / 二级

如果浏览器中的 URL 为“http://example.com/level1/ http://example.com/level1/”,我期望:

主页 / 1 级

翻译也可以稍后添加。我将其包含在内是为了显示我的最终预期结果。


仅当面包屑上的标签与链接 URL 不同时,您才需要 breadcrumbNameMap(例如,路径“/level1”在面包屑中显示为“Level 1”)。

这是与 React Router 集成的 Material UI Breadcrumb 示例的修改版本。

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

https://sgl12.codesandbox.io/level1/level2 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>
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Material-UI 面包屑导航与反应路由器集成 的相关文章

随机推荐

  • WPF 图表:如何折叠线系列中的数据点

    我在图表中有多条线系列 首先绘制图表线 然后沿着线绘制点 这很烦人 而且大点的大小使得大型数据集根本毫无用处 目前我正在为每个系列做这个
  • 选择限制功能不适用于reactjs 复选框形式

    我有一个从 json 获取复选框的 React 组件 复选框的每个部分最多可以包含 5 个复选框 我试图将每个部分中的限制设置为最多 2 个选择 但是它没有按应有的方式工作 主要成分是项目列表 js 复选框来自复选框 js 这是我正在尝试做
  • current->mm 在 Linux 内核中给出 NULL

    我想遍历页表 因此我访问了 current gt mm 但它给出了 NULL 值 我正在研究 linux 内核 3 9 我不明白 current gt mm 怎么会为零 这里有什么我想念的吗 这意味着您处于内核线程中 在Linux中 内核线
  • 用MPI发送size_t类型数据

    在 MPI 中发送 size t 类型数字的最安全方法是什么 例如 我确信它是not将其作为 MPI INT 盲目发送是安全的 MPI LONG 总是有效吗 使用宏怎么样 include
  • 选择看起来像错误/缺失功能的重载时,C# 编译器出现奇怪的行为

    我最近发现 C 编译器的一个有趣的行为 想象一下这样的界面 public interface ILogger void Info string operation string details null void Info string o
  • 使用 C 函数扩展 Numpy

    我正在尝试加速我的 Numpy 代码 并决定实现一个特定的函数 而我的代码大部分时间都在 C 中使用 我实际上是 C 的菜鸟 但我设法编写了一个函数 将矩阵中的每一行归一化为 1 我可以编译它 并用一些数据 在 C 中 测试它 它满足了我的
  • 使用 RxJS 将多个 ajax 请求转换为 Observables

    我正在努力解决某件事 我猜这意味着我误解了并且正在做一些愚蠢的事情 我有一个可观察对象 需要使用它来创建一些对象 将其发送到服务器进行处理 将服务器的结果与我发送的对象结合起来 然后将其转换为可观察对象 所以我想要做什么 我认为 就像是 v
  • 具有 http 身份验证的 Zend SOAP 服务器 WSDL URI

    我正在尝试使用 Zend Soap Server 设置 SOAP 服务 ZF1 我的问题是 WSDL URI 受密码保护 可以通过设置 https 用户名 来访问它 电子邮件受保护 cdn cgi l email protection 作为
  • 使 Python 单元测试因任何线程的异常而失败

    我正在使用单元测试框架来自动化多线程 python 代码 外部硬件和嵌入式 C 的集成测试 尽管我公然滥用单元测试框架进行集成测试 但它的效果非常好 除了一个问题 如果任何生成的线程引发异常 我需要测试失败 这可以通过单元测试框架实现吗 一
  • svn update 没有更新!

    我希望 svn update 用服务器上的文件覆盖我的本地文件 即使我的本地文件有修改 我也想扔掉它们并使用远程存储库上的版本 我怎么做 我试过svn update force但它不起作用 Update 感谢您的回答 所以我使用这样的恢复
  • 纯 Web 应用程序(HTML5 等)的推荐 IDE [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • actionbarsherlock 选项卡中的 Google 地图

    我正在尝试让谷歌地图 v2 在我的应用程序中工作 我见过几个示例 展示了如何在活动中打开 SupportMapFragment 这个想法是你的活动会调用setContentView R layout map layout 其中 map la
  • ggplot2 中的scale_colour_gradient 与scale_fill_gradient

    我绝对是初学者ggplot2并尝试使用这个包画出漂亮的人物 我正在阅读手册 但我不明白它们之间的区别scale colour gradient vs scale fill gradient 在我的分析中 我将使用 假设 进行观察 因为我不确
  • 使用 PHP 的 telegram API 发送图像总是失败

    我想制作一个使用 Telegram API 发送图像的函数 参考 API https github com mgp25 Telegram Bot API https github com mgp25 Telegram Bot API 但是当
  • PHP 闭包是否损坏或者我遗漏了什么?

    我一直在阅读 PHP 5 3 的新功能 主要功能之一是closures 除非我犯了严重错误 否则 PHP 开发人员要么是 a 将闭包与匿名函数混淆b 我正在测试的 PHP 5 3 1 中的闭包被破坏了 From 维基百科怎么说 http e
  • E/iardini.error0:无效 ID 0x00000001 - 错误资源 ID

    我目前遇到一个错误 该错误继续降低我的应用程序的性能 该错误不会导致应用程序关闭或崩溃 也不会导致向控制台写入异常 控制台仅报告此消息 E iardini error0 Invalid ID 0x00000001 该消息中唯一出现的内容是
  • 为什么我无法将派生泛型类型转换为基本非泛型类型(通过约束)?

    鉴于这个虚构的例子 class NonGeneric class Generic
  • 如何按原样生成数据库脚本?

    我这样做的主要原因是跟踪我的应用程序的数据库架构更改 在 SQL Server Management Studio 中 我能够生成一个创建脚本来创建数据库 但它不包含任何测试数据 理想情况下 当脚本运行时 它应该删除现有数据库 假设它已经存
  • 将多项回答问题制成表格

    想象一下 我有一个问题 有四个选项 受访者可以选择零个或四个选项的任意组合 变量被命名为A B C and D响应存储在 data frame 中 如下所示 set seed 1 dat data frame A sample c 0 1
  • Material-UI 面包屑导航与反应路由器集成

    我正在尝试将 Material UI 面包屑与反应路由器一起使用 我如何以编程方式检测当前路线 在 Material UI 网站上有一个关于如何使用它的示例 但它需要使用静态 breadcrumbNameMap 我已经尝试使用 HOC wi