I've created a Breadcrumb component but I'm struggling to add routing to it.

So far, the component is able to load a custom number of nodes based on how many elements we send to an array and it logs into the console the name of the node when clicked.

What it is needed is to make this breadcrumb change the url when a node is clicked.

It should contain something like this:

  <Switch>
    <Route path="/component0" component={Component0} />
    <Route path="/component1" component={Component1} />
    ...
  </Switch>

Is it possible to make it for a custom number of nodes?

This is the code so far:

Parent component:

import React, { useState } from 'react';

import Breadcrumbs from './Breadcrumbs';
export interface BreadcrumbProps {}

export function Breadcrumb(props: BreadcrumbProps) {
  const [crumbs, setCrumbs] = useState(['Home', 'Category', 'Sub Category']);

  const selected = (crumb: any) => {
    console.log(crumb);
  };

  return (
    <div>
      <Breadcrumbs crumbs={crumbs} selected={selected} />
    </div>
  );
}

export default Breadcrumb;

Child component:

function Breadcrumbs(props: any) {
  function isLast(index: number) {
    return index === props.crumbs.length - 1;
  }

  return (
    <nav className=''>
      <ol className=''>
        {props.crumbs.map((crumb, ci) => {
          const disabled = isLast(ci) ? 'disabled' : '';

          return (
            <li key={ci} className=''>
              <button className={`btn btn-link ${disabled}`} onClick={() => props.selected(crumb)}>
                {crumb}
              </button>
            </li>
          );
        })}
      </ol>
    </nav>
  );
}

export default Breadcrumbs;