时间戳

首页 > 解决方案 > Material-UI 面包屑导航与 react-router 集成

reactjs - Material-UI 面包屑导航与 react-router 集成

问题描述

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

在 Material-UI 网站上有一个关于如何使用它的示例，但它需要使用静态面包屑名称映射。我已经尝试使用 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 ”，我希望面包屑的输出是：

主页 / Level1 / Level2

如果浏览器中的 URL 是“ http://example.com/level1/ ”，我希望：

主页 / 1 级

翻译也可以稍后添加。我包括它是为了显示我的最终预期结果。

标签： reactjsreact-routermaterial-ui

解决方案

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

这是与 React 路由器集成的 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>
}

推荐阅读