Material-UI Breadcrumb Integration with react-router

Question

I'm trying to use the Material-UI breadcrumb with react-router. How can I programatically detect the current route.

On the Material-UI website there is an example on how to use it but it requires the usage of a static breadcrumbNameMap. I already tried to split the pathname by using the HOC "withRouter" but it doesn't work.

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);

If the URL in my browser points to "http://example.com/level1/level2", I would expected the output of the breadcrumb to be:

Home / Level1 / Level2

If the URL in the browser would be "http://example.com/level1/", I would expect:

Home / Level 1

The translation can also be added later. I included it for showing my final expected result.

Answer 1

You need breadcrumbNameMap only if labels on breadcrumbs are different then the link URLs (e.g. path '/level1' is displayed as 'Level 1' in the breadcrumb.

Here is a modified version of Material UI Breadcrumb example integrated with react router.

Try it out complete program here 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>
}