title: react router v6 breadcrumbs routing with multiple params
body: <p>Ok, so I have the following breadcrumbs script which generates the breadcrumbs for my React app.  Everything works ok until I add a second param as shown below.
  The actual routing works ok, its just the breadcrumbs display.</p>
  
  <p>Im using react &amp; react-router-dom v6.4.1</p>
  
  <p>throws 'key' error</p>
  
  <pre><code>/Sites/SiteDashboard/${this.props.match.params.id}/SiteDevices/EditDevice/${row.id}
  </code></pre>
  
  <p>Breadcrumb</p>
  
  <pre><code>/Sites/SiteDashboard/:id/SiteDevices/EditDevice/:deviceid
  </code></pre>
  
  <p>single params works ok</p>
  
  <pre><code>'/Sites/SiteDashboard/:id': params =&gt; params.id,
  </code></pre>
  
  <p>have tryed this, same error</p>
  
  <pre><code>'/SiteDevices/:deviceid': params =&gt; params.deviceid,
  </code></pre>
  
  <p>with 2 params I get the error as shown in comments below...</p>
  
  <p>I need advice on how to use the 2 params in my route without getting this 'key' error on second param. Thanks.</p>
  
  <pre><code>import React from 'react';
  import Route from 'route-parser';
  import { Link, withRouter } from 'react-router-dom';
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  
  const isFunction = value =&gt; typeof value === 'function';
  const getPathTokens = pathname =&gt; {
    const paths = ['/'];
  
    if (pathname === '/') return paths;
  
    pathname.split('/').reduce((prev, curr) =&gt; {
      const currPath = `${prev}/${curr}`;
      paths.push(currPath);
      return currPath;
    });
  
    return paths;
  };
  
  function getRouteMatch(routes, path) {
    return Object.keys(routes)
      .map(key =&gt; {
        const params = new Route(key).match(path);
        return {
          didMatch: params !== false,
          params,
          key
        };
      })
      .filter(item =&gt; item.didMatch)[0];
  }
  
  function getBreadcrumbs({ routes, match, location }) {
    const pathTokens = getPathTokens(location.pathname);
    return pathTokens.map((path, i) =&gt; {
      const routeMatch = getRouteMatch(routes, path);
      ///////////second params error
      ///////////Uncaught TypeError: Cannot read property 'key' of undefined
      const routeValue = routes[routeMatch.key];
      const name = isFunction(routeValue)
        ? routeValue(routeMatch.params)
        : routeValue;
      return { name, path };  
    });
  }
  
  function Breadcrumbs({ routes, match, location }) {
    const breadcrumbs = getBreadcrumbs({ routes, match, location });
  
    return (
      &lt;div&gt;
        {' '}
        {breadcrumbs.map((breadcrumb, i) =&gt;
          &lt;span key={breadcrumb.path}&gt;
            &lt;Link to={breadcrumb.path}&gt;
              {breadcrumb.name}
            &lt;/Link&gt;
            {i &lt; breadcrumbs.length - 1 ?  &lt;FontAwesomeIcon icon={['fas', 'caret-right']} /&gt;  : ''}
          &lt;/span&gt;
        )}
      &lt;/div&gt;
    );
  }
  
  export default withRouter(Breadcrumbs);
  </code></pre>