Creé un componente Breadcrumb pero estoy luchando para agregarle enrutamiento.

Hasta ahora, el componente puede cargar una cantidad personalizada de nodos en función de la cantidad de elementos que enviamos a una matriz y registra en la consola el nombre del nodo cuando se hace clic.

Lo que se necesita es hacer que esta ruta de navegación cambie la URL cuando se hace clic en un nodo.

Debería contener algo como esto:

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

¿Es posible hacerlo para un número personalizado de nodos?

Este es el código hasta ahora:

Componente principal:

 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;

Componente hijo:

 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;