Las rutas de navegación son importantes en el desarrollo de páginas web, ya que brindan a los usuarios una forma de realizar un seguimiento de su ubicación actual dentro de nuestra página web y también ayudan en la navegación de nuestra página web.

En esta guía, implementaremos rutas de navegación en React usando reaccionar-router v6 y Bootstrap.

React-router v6 es una biblioteca de enrutamiento utilizada en React y React Native para navegar dentro de una página web o aplicación web.

Nuestra implementación utiliza Typecript pero también se puede utilizar fácilmente para un proyecto basado en Javascript.

Configurando

Primero, instalemos react-router-dom en nuestro proyecto si aún no se ha instalado:

npm instala reaccionar-router-dom

O alternativa, usando hilo:

hilo agregar reaccionar-router-dom

Instalemos también bootstrap para diseñar nuestro componente:

npm instala arranque

Implementando nuestro componente

Luego creamos un componente Breadcrumbs.tsx que contendrá el marcado de las rutas de navegación y también incluirá la lógica necesaria para determinar la ubicación actual en relación con la ubicación raíz.

Comencemos agregando un marcado simple para el componente:

El componente actualmente solo tiene un botón de retroceso. Agreguemos una implementación simple para el botón Atrás de modo que al hacer clic, se cargue la página anterior:

  const goBack = () => {
    window.history.back();
  };

El siguiente paso será escribir una función que utilizará la función matchRoutes para obtener la ruta actual y aplicar transformaciones para filtrar todas las rutas relacionadas con la ruta actual.
matchRoute acepta una matriz de objetos de tipo AgnosticRouteObject y devuelve un AgnosticRouteMatch[] | nulo donde T es el tipo de objeto que pasamos.
También es importante tener en cuenta que el objeto debe contener una propiedad denominada ruta.

Primero declaremos una interfaz para nuestra ruta:

export interface IRoute {
  name: string;
  path: string; //Important
}

Declaremos entonces nuestras rutas:

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home'
  },
  {
    path: '/home/about',
    name: 'About'
  },
  {
    path: '/users',
    name: 'Users'
  },
  {
    path: '/users/:id',
    name: 'User'
  },
  {
    path: '/users/:id/settings/edit',
    name: 'Edit User Settings'
  }
];

También declaramos una variable para contener el gancho useLocation y también otra para mantener nuestras rutas de navegación en estado:

const location = useLocation();
const [crumbs, setCrumbs] = useState([]);

A continuación, implementemos nuestra función:

const getPaths = () => {
  const allRoutes = matchRoutes(routes, location);
  const matchedRoute = allRoutes ? allRoutes[0] : null;
  let breadcrumbs: IRoute[] = [];
  if (matchedRoute) {
    breadcrumbs = routes
      .filter((x) => matchedRoute.route.path.includes(x.path))
      .map(({ path, ...rest }) => ({
        path: Object.keys(matchedRoute.params).length
          ? Object.keys(matchedRoute.params).reduce(
              (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string), path)
          : path,
        ...rest,
      }));
  }
  setCrumbs(breadcrumbs);
};

Aquí, primero obtenemos todas las rutas que coinciden con la ubicación actual:
const allRoutes = matchRoutes(rutas, ubicación);

Luego hacemos una verificación rápida para ver si se devuelve algún resultado y tomamos el primero:
const matchedRoute = todas las rutas? todas las rutas[0] : nulo;

A continuación, filtramos todas las rutas que coinciden con la ruta actual:
rutas.filtro((x) => ruta emparejada.ruta.ruta.incluye(x.ruta))

Luego usemos el resultado para crear una nueva matriz que verifique si la ruta tiene parámetros y luego intercambie rutas dinámicas con el valor de los parámetros:

 .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));

Esto garantiza que si declaramos una ruta como /users/:id/edit en las rutas y la identificación se pasa como 1, entonces obtenemos /users/1/edit.

A continuación, llamemos a nuestra función en un useEffect para que se ejecute cada vez que cambie nuestra ubicación:

  useEffect(() => {
    getPaths();
  }, [location]);

Una vez hecho esto, podemos usar las migajas en nuestro marcado:

{crumbs.map((x: IRoute, key: number) =>
  crumbs.length === key   1 ? (
    

Aquí, muestra todas las migajas con sus enlaces excepto la última que solo muestra el nombre.

Con eso, ahora tenemos nuestro componente BreadCrumbs.tsx completo:

import { useEffect, useState } from 'react';
import { Link, matchRoutes, useLocation } from 'react-router-dom';

export interface IRoute {
  name: string;
  path: string;
}

const routes: IRoute[] = [
  {
    path: '/home',
    name: 'Home',
  },
  {
    path: '/home/about',
    name: 'About',
  },
  {
    path: '/users',
    name: 'Users',
  },
  {
    path: '/users/:id/edit',
    name: 'Edit Users by Id',
  },
];

const Breadcrumbs = () => {
  const location = useLocation();
  const [crumbs, setCrumbs] = useState([]);

  //   const routes = [{ path: '/members/:id' }];

  const getPaths = () => {
    const allRoutes = matchRoutes(routes, location);
    const matchedRoute = allRoutes ? allRoutes[0] : null;
    let breadcrumbs: IRoute[] = [];
    if (matchedRoute) {
      breadcrumbs = routes
        .filter((x) => matchedRoute.route.path.includes(x.path))
        .map(({ path, ...rest }) => ({
          path: Object.keys(matchedRoute.params).length
            ? Object.keys(matchedRoute.params).reduce(
                (path, param) => path.replace(`:${param}`, matchedRoute.params[param] as string),
                path
              )
            : path,
          ...rest,
        }));
    }
    setCrumbs(breadcrumbs);
  };

  useEffect(() => {
    getPaths();
  }, [location]);

  const goBack = () => {
    window.history.back();
  };

  return (
    

      
  );
};
export default Breadcrumbs;

Luego podremos usar el componente en cualquier parte de nuestra aplicación, preferiblemente en el diseño.

Conclusión

Hemos visto cómo implementar un componente de ruta de navegación simple que podemos agregar a nuestra aplicación para mejorar la navegación y la UX.

Enlaces útiles

https://stackoverflow.com/questions/66265608/react-router-v6-get-path-pattern-for-current-route

https://medium.com/@mattywilliams/generating-an-automatic-breadcrumb-in-react-router-fed01af1fc3 en el que se inspira esta publicación.