title: Material-UI Breadcrumb Integration with react-router
body: <p>I'm trying to use the Material-UI breadcrumb with react-router. How can I programatically detect the current route.</p>
  
  <p>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.</p>
  
  <pre><code>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 =&gt; ({
      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 =&gt; x);
      console.log("pathnames", pathnames);
  
      return (
          &lt;div className={classes.root}&gt;
              &lt;Paper elevation={0} className={classes.paper}&gt;
                  &lt;Breadcrumbs aria-label="Breadcrumb"&gt;
                      &lt;Link color="inherit" href="/"&gt;
                          Home
                      &lt;/Link&gt;
                      {pathnames.map((value, index) =&gt; {
                          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) =&gt; {
                              // Only capitalize starting from the second element
                              if (i &gt; 0) {
                                  path[i] =
                                      path[i].charAt(0).toUpperCase() +
                                      path[i].slice(1);
                              }
                          });
  
                          // return (
                          //     &lt;Typography color="textPrimary" key={to}&gt;
                          //         {useTranslation(path.join(""))}
                          //     &lt;/Typography&gt;
                          // );
  
                          // // return (
                          // //     &lt;Typography color="textPrimary" key={to}&gt;
                          // //         {pathnames[to]}
                          // //     &lt;/Typography&gt;
                          // // );
  
                          return last ? (
                              &lt;Typography color="textPrimary" key={to}&gt;
                                  {breadcrumbNameMap[to]}
                              &lt;/Typography&gt;
                          ) : (
                              &lt;Link color="inherit" to={to} key={to}&gt;
                                  {useTranslation(path.join(""))}
                              &lt;/Link&gt;
                          );
                      })}
                  &lt;/Breadcrumbs&gt;
              &lt;/Paper&gt;
          &lt;/div&gt;
      );
  }
  
  export default withRouter(SimpleBreadcrumbs);
  </code></pre>
  
  <p>If the URL in my browser points to "<a href="http://example.com/level1/level2" rel="nofollow noreferrer">http://example.com/level1/level2</a>", I would expected the output of the breadcrumb to be:</p>
  
  <p>Home / Level1 / Level2</p>
  
  <p>If the URL in the browser would be "<a href="http://example.com/level1/" rel="nofollow noreferrer">http://example.com/level1/</a>", I would expect:</p>
  
  <p>Home / Level 1</p>
  
  <p>The translation can also be added later. I included it for showing my final expected result.</p>