Implémentation du fil d'Ariane dans React à l'aide de React Router v6

Le fil d'Ariane est important dans le développement de pages Web car il fournit aux utilisateurs un moyen de garder une trace de leur emplacement actuel dans notre page Web et facilite également la navigation sur notre page Web.

Dans ce guide, nous implémenterons le fil d'Ariane dans React à l'aide de React-Router v6 et Bootstrap.

React-router v6 est une bibliothèque de routage utilisée dans React et React Native pour naviguer dans une page Web ou une application Web.

Notre implémentation utilise Typescript mais elle peut également être facilement utilisée pour un projet basé sur Javascript.

Mise en place

Tout d'abord, installons React-Router-dom dans notre projet s'il n'a pas déjà été installé :

npm install réagissez-router-dom

Ou alternative, en utilisant du fil :

fil ajouter réagir-router-dom

Installons également bootstrap pour styliser notre composant :

npm installer bootstrap

Implémentation de notre composant

Nous créons ensuite un composant Breadcrumbs.tsx qui contiendra le balisage du fil d'Ariane et inclura également la logique nécessaire pour déterminer l'emplacement actuel par rapport à l'emplacement racine.

Commençons par ajouter un balisage simple pour le composant :

 <div className='text-primary'>
   <nav aria-label='breadcrumb'>
      <ol className='breadcrumb'>
        <li className='breadcrumb-item pointer'>
          <span className='bi bi-arrow-left-short me-1'></span>
            Back
        </li>
      </ol>
   </nav>
</div>

Le composant n'a actuellement qu'un bouton de retour. Ajoutons une implémentation simple pour le bouton de retour telle que lorsque vous cliquez dessus, la page précédente doit être chargée :

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

La prochaine étape consistera à écrire une fonction qui utilisera la fonction matchRoutes pour obtenir l'itinéraire actuel et appliquer des transformations pour filtrer tous les itinéraires liés à l'itinéraire actuel.
matchRoute accepte un tableau d'objets de type AgnosticRouteObject et renvoie un AgnosticRouteMatch[] | null où T est le type d'objet que nous transmettons.
Il est également important de noter que l'objet doit contenir une propriété nommée path.

Déclarons d'abord une interface pour notre itinéraire :

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

Déclarons ensuite nos itinéraires :

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'
  }
];

Nous déclarons également une variable pour contenir le hook useLocation et également une autre pour contenir notre fil d'Ariane dans l'état :

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

Ensuite, implémentons notre fonction :

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);
};

Ici, nous obtenons d'abord tous les itinéraires qui correspondent à l'emplacement actuel :
const allRoutes = matchRoutes(routes, location);

Nous effectuons ensuite une vérification rapide pour voir si un résultat est renvoyé et nous prenons le premier :
const matchedRoute = allRoutes ? allRoutes[0] : nul;

Ensuite, nous filtrons tous les itinéraires qui correspondent à l'itinéraire actuel :
routes.filter((x) => matchedRoute.route.path.includes(x.path))

Utilisons ensuite le résultat pour créer un nouveau tableau qui vérifie si le chemin a des paramètres, puis échangeons les routes dynamiques avec la valeur des paramètres :

 .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,
        }));

Cela garantit que si nous déclarons une route comme /users/:id/edit dans les routes et que l'identifiant est passé à 1, alors nous obtenons /users/1/edit.

Ensuite, appelons notre fonction dans un useEffect pour qu'elle s'exécute à chaque fois que notre emplacement change :

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

Ceci étant fait, nous pouvons ensuite utiliser les miettes dans notre balisage :

{crumbs.map((x: IRoute, key: number) =>
  crumbs.length === key + 1 ? (
    <li className='breadcrumb-item'>{x.name}</li>
      ) : (
        <li className='breadcrumb-item'>
          <Link to={x.path} className=' text-decoration-none'>
            {x.name}
          </Link>
        </li>
      )
 )}

Ici, affichez toutes les miettes avec leurs liens sauf la dernière qui n'affiche que le nom.

Avec cela, nous avons maintenant notre composant BreadCrumbs.tsx complet :

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 (
    

      

        

          

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

                
                  {x.name}
                
              
            )
          )}
        
      
    
  );
};
export default Breadcrumbs;

Nous pouvons ensuite utiliser le composant dans n'importe quelle partie de notre application, de préférence dans la mise en page.

Conclusion

Nous avons vu comment implémenter un simple composant de fil d'Ariane que nous pouvons ajouter à notre application pour améliorer la navigation et l'UX.

Liens utiles

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 dont cet article s'inspire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!