Maison > interface Web > js tutoriel > le corps du texte

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

Linda Hamilton
Libérer: 2024-09-29 06:18:01
original
353 Les gens l'ont consulté

Implementing Breadcrumbs in React using 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>
Copier après la connexion

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

Copier après la connexion

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
}
Copier après la connexion

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'
  }
];
Copier après la connexion

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[]>([]);
Copier après la connexion

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);
};
Copier après la connexion

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,
        }));
Copier après la connexion

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]);
Copier après la connexion

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>
      )
 )}
Copier après la connexion

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 (
    
); }; export default Breadcrumbs;
Copier après la connexion

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!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!