Avez-vous déjà remarqué ces petits morceaux de texte sur certains sites Web indiquant votre emplacement actuel sur le site? C'est ce qu'on appelle des fils d'Ariane, et ils peuvent être un moyen utile d'orienter les utilisateurs, en particulier lorsqu'ils naviguent sur des sites Web complexes. Cet article vous montrera comment créer des fils d'Ariane dans React.js.

Que sont les fils d'Ariane et en quoi sont-ils importants ?

Les fils d'Ariane sont généralement de petits morceaux de texte qui indiquent l'emplacement actuel sur un site Web. Ils peuvent être utiles pour orienter les utilisateurs, en particulier lorsqu'ils naviguent sur des sites Web comportant plusieurs pages. En fournissant une piste de liens, le fil d'Ariane peut aider les utilisateurs à comprendre où ils se trouvent sur un site Web et leur permettre de revenir facilement aux sections précédentes.

Il est important de noter que le fil d'Ariane ne doit pas être utilisé comme principal moyen de navigation sur un site Web. Ils doivent plutôt être utilisés en plus d'autres éléments de navigation tels qu'un menu ou une barre de recherche.

instagram viewer

Comment créer des fils d'Ariane dans React.js

Il existe deux façons principales de créer des fils d'Ariane dans React.js: en utilisant le réagir-routeur-dom bibliothèque ou en utilisant le use-react-router-breadcrumbs bibliothèque. Mais avant de commencer, il faut créer une application React.

Méthode 1: En utilisant la bibliothèque react-router-dom

Avec la bibliothèque react-router-dom, vous pouvez créer manuellement des fils d'Ariane pour chaque chemin de votre application React. La bibliothèque propose une composant qui peut être utilisé pour créer des fils d'Ariane.

Pour utiliser la bibliothèque react-router-dom, vous devez d'abord l'installer à l'aide de npm :

npm installer réagir-routeur-dom

Une fois la bibliothèque installée, vous pouvez l'importer dans votre composant React :

importer { Lien } depuis 'réagir-routeur-dom'

Vous pouvez ensuite utiliser le composant pour créer des fils d'Ariane :

<Lien vers ="/">Maison</Link>
<Lien vers ="/products">Des produits</Link>
<Lien vers ="/products/1">Produit 1</Link>

Maintenant, vous pouvez ajouter du style au fil d'Ariane et mettre en surbrillance la page actuelle sur laquelle vous vous trouvez. Pour cela, vous pouvez utiliser le nom du cours accessoire de la composant. Pour obtenir le chemin d'accès actuel, vous pouvez utiliser le emplacement objet de la bibliothèque react-router-dom :

importer { Lien, utiliserEmplacement } depuis 'réagir-routeur-dom'
fonctionChapelure() {
constante emplacement = useLocation();
retour (
<navigation>
<Lien vers ="/"
 className={location.pathname "/"? "fil d'Ariane actif": "fil d'Ariane non actif"}
>
 Maison
</Link>
<Lien vers ="/products"
 className={location.pathname.startsWith("/products")? "fil d'Ariane actif": "fil d'Ariane non actif"}
>
 Des produits
</Link>
<Lien vers ="/products/1"
 className={location.pathname "/products/1"? "fil d'Ariane actif": "fil d'Ariane non actif"}
>
 Produit 1
</Link>
</nav>
 );
}
exporterdéfaut Chapelure;

Maintenant, créez un nouveau fichier CSS et nommez-le chapelure.css. Ajoutez les règles CSS suivantes au fichier :

.breadcrumb-non-actif {
 couleur: #cccccc;
}
.breadcrumb-actif {
 couleur: #000000;
}
.breadcrumb-flèche {
 marge gauche: 10 px ;
 marge droite: 10 px ;
}

Maintenant, importez votre fichier CSS dans votre composant React et ajoutez le fil d'Ariane classe à votre Composants:

importer { Lien, utiliserEmplacement } depuis 'réagir-routeur-dom'
importer "./breadcrumbs.css";
fonctionChapelure() {
constante emplacement = useLocation();
retour (
<navigation>
<Lien vers ="/"
 className={location.pathname "/"? "fil d'Ariane actif": "fil d'Ariane non actif"}
>
 Maison
</Link>
<span className="fil d'Ariane">&gt ;</span>
<Lien vers ="/products"
 className={location.pathname.startsWith("/products")? "fil d'Ariane actif": "fil d'Ariane non actif"}
>
 Des produits
</Link>
<span className="fil d'Ariane">&gt ;</span>
<Lien vers ="/products/1"
 className={location.pathname "/products/1"? "fil d'Ariane actif": "fil d'Ariane non actif"}
>
 Produit 1
</Link>
</nav>
 );
}
exporterdéfaut Chapelure;

Il y a différents types de crochets dans React. La bibliothèque react-router-dom utiliserEmplacement hook vous donne accès à l'objet location, qui contient des informations sur le chemin d'URL actuel.

Le La propriété className du composant ajoute une classe CSS au fil d'Ariane. La prop className prend une chaîne ou un tableau de chaînes. S'il s'agit d'une chaîne, il ajoutera la chaîne en tant que classe unique à l'élément. S'il s'agit d'un tableau de chaînes, chaque chaîne du tableau sera ajoutée en tant que classe distincte.

Le commence avec La méthode vérifie si le chemin d'accès actuel commence par "/products". En effet, le fil d'Ariane de la page des produits doit être actif non seulement lorsque le chemin est "/produits", mais également lorsque le chemin est "/produits/1", "/produits/2", etc.

Méthode 2: En utilisant la bibliothèque use-react-router-breadcrumbs

Une autre façon de créer des fils d'Ariane dans React consiste à utiliser la bibliothèque use-react-router-breadcrumbs. Cette bibliothèque génère automatiquement des fils d'Ariane en fonction des itinéraires définis dans votre application React.

Pour utiliser cette bibliothèque, vous devrez d'abord l'installer à l'aide de npm :

npm installerutiliser-réagir-routeur-fil d'Ariane

Une fois la bibliothèque installée, vous pouvez l'importer dans votre composant React :

importer utiliserBreadcrumbs depuis 'utiliser-réagir-routeur-fil d'Ariane'

Vous pouvez ensuite utiliser le utiliserBreadcrumbs crochet pour créer du fil d'Ariane :

constante chapelure = useBreadcrumbs();
console.log (fil d'Ariane) ;

Cela enregistrera un tableau d'objets fil d'Ariane dans la console. Chaque objet fil d'Ariane contient des informations sur la route, telles que le nom, le chemin et les paramètres.

Maintenant, vous pouvez afficher votre fil d'Ariane à l'écran. Vous pouvez utiliser le composant de la bibliothèque react-router pour créer votre fil d'Ariane :

importer { Lien } depuis 'réagir-routeur-dom'
importer utiliserBreadcrumbs depuis 'utiliser-réagir-routeur-fil d'Ariane'
constante itinéraires = [
 { chemin: '/users/:userId', miette de pain: 'Exemple 1' },
 { chemin: '/data', miette de pain: 'Exemple 2' }
];
fonctionChapelure() {
constante chapelure = useBreadcrumbs (routes);
console.log (fil d'Ariane)
retour (
<navigation>
 {breadcrumbs.map(({ match, breadcrumb}) => (
<Clé de lien={match.url} vers={match.url}>
 {miette de pain} /
</Link>
 ))}
</nav>
 );
}
exporterdéfaut Chapelure;

Le composant Link est importé de la bibliothèque react-router-dom. Vous utiliserez ce composant pour créer des liens vers d'autres parties de l'application. Vous pouvez aussi créer des itinéraires protégés à l'aide du composant Lien.

Un tableau d'objets route est créé. Chaque objet route contient un chemin et une propriété de fil d'Ariane. La propriété path correspond au chemin de l'URL et la propriété breadcrumb correspond au nom du fil d'Ariane.

Le utiliserBreadcrumbs hook est utilisé pour créer le fil d'Ariane. Ce crochet accepte un tableau de routes en tant que paramètre. Les routes sont utilisées pour générer les fils d'Ariane.

La méthode map est utilisée pour itérer sur le tableau de fils d'Ariane. Pour chaque chapelure, un composant est créé. Le composant Lien a un pour prop, qui correspond au chemin URL du fil d'Ariane. Le fil d'Ariane lui-même est rendu comme le contenu du composant.

Vous pouvez maintenant ajouter du style au fil d'Ariane. Créez un nouveau fichier CSS et nommez-le Fil d'Ariane.css. Après cela, ajoutez les règles CSS suivantes au fichier :

.breadcrumb-non-actif {
 couleur: #cccccc;
}
.breadcrumb-actif {
 couleur: #000000;
}

Maintenant, vous pouvez importer le fichier CSS dans le composant React et ajouter les classes de fil d'Ariane au Composants:

importer { Lien, utiliserEmplacement } depuis 'réagir-routeur-dom'
importer utiliserBreadcrumbs depuis 'utiliser-réagir-routeur-fil d'Ariane'
importer "./Breadcrumbs.css";
constante itinéraires = [
 { chemin: '/users/:userId', miette de pain: 'Exemple 1' },
 { chemin: '/data', miette de pain: 'Exemple 2' }
];
fonctionChapelure() {
constante chapelure = useBreadcrumbs (routes);
constante emplacement = utiliserEmplacement()
retour (
<navigation>
 {breadcrumbs.map(({ match, breadcrumb}) => (
<Lien 
 clé={match.url} 
 to={match.url}
 className={match.pathname location.pathname? "fil d'Ariane actif": "fil d'Ariane non actif"}
>
 {miette de pain} / 
</Link>
 ))}
</nav>
 );
}
exporterdéfaut Chapelure;

Augmentez l'engagement des utilisateurs avec le fil d'Ariane

Avec le fil d'Ariane, vous pouvez non seulement aider les utilisateurs à comprendre où ils se trouvent sur votre site Web, mais vous pouvez également augmenter l'engagement des utilisateurs. Les fils d'Ariane peuvent être utilisés pour montrer la progression de l'utilisateur dans une tâche, comme un processus d'inscription ou un achat. En montrant la progression de l'utilisateur, vous pouvez l'encourager à terminer la tâche.

Il y a aussi beaucoup d'autres choses que vous devez garder à l'esprit lors de la conception d'un site Web, telles que la convivialité, l'accessibilité et la convivialité mobile. Cependant, si vous gardez ces éléments à l'esprit, vous pouvez créer un site Web à la fois convivial et attrayant.