Comprendre le routage React / Blogs / Perficient

Le routage aide les utilisateurs à basculer entre les vues d’une application Web en fonction d’une action ou d’une demande. Les utilisateurs peuvent basculer entre les pages lorsqu’ils cliquent sur un lien, un bouton, une icône, une image ou un autre composant du programme.

1. Installation du routeur React

React utilise une bibliothèque externe pour gérer le routage avant de pouvoir utiliser cette bibliothèque. nous devons inclure le routage dans notre projet, nous devons donc d’abord exécuter cette commande dans le répertoire du projet de votre terminal.

installez react-router-dom@6 avec npm

2. Configurer le React-Router

Vous devez importer BrowserRouter à partir de react-router-dom dans le fichier de base, index.js, pour configurer React Router dans votre projet.

3. Configurer les itinéraires de réaction

Maintenant que le routeur React a été importé et installé avec succès dans notre projet, l’étape suivante consiste à implémenter le routage à l’aide du routeur React.

Par conséquent, nous devons configurer toutes nos routes dans les composants vers lesquels nous voulons naviguer.

La page TabOne, la page TabTwo et la page TabThree seraient les trois premières pages que nous développerions. Une fois les pages configurées avec succès, nous pouvons importer des routes dans le fichier App.js, qui sert de cadre à notre application.

Comme nous pouvons le voir dans le code ci-dessus, nous avons utilisé les composants Routes et Route de React Router Dom pour importer et déclarer les routes dont nous avions besoin. La balise Routes englobe toutes les Routes, et toutes les Routes ont les caractéristiques suivantes :

Chemin: Cela indique l’itinéraire que nous voulons que les utilisateurs empruntent pour accéder au composant défini, comme son nom l’indique. Par exemple, si nous définissons le chemin sur /tab-two, l’utilisateur qui ajoute /tab-two au lien URL sera redirigé vers cette page.

Élément: Cela indique le nom du composant de votre projet.

4. Accéder aux itinéraires configurés avec des liens

Nous allons développer un composant NavBar et le positionner au début de nos routes dans le fichier App.js.

Ajoutons maintenant des liens à la barre de navigation comme mentionné ci-dessous :

Ici, nous avons d’abord importé Link de react-router-dom avant d’ajouter la propriété en fonction du chemin que nous avons défini lors de la définition de nos routes. Nous pouvons accéder à des itinéraires spécifiés en ajoutant des liens à notre application React, ce qui est extrêmement facile à faire.

5. Implémenter des liens actifs

Les utilisateurs doivent être en mesure de reconnaître le lien spécifique vers lequel ils se dirigent maintenant en lui donnant une couleur distincte des autres liens de navigation, en ajoutant des styles supplémentaires comme le soulignement, etc. lors de l’ajout de liens à une barre de navigation. L’utilisation du composant NavLink par rapport au composant Link, qui évalue si un utilisateur a récemment navigué en ajoutant une classe active à ce lien, simplifie la gestion et la mise en œuvre de la fonctionnalité de lien actif dans React. Le composant NavLink a remplacé le composant Link dans le composant NavBar.

L’extrémité avant :

J’espère que c’est utile. Bon apprentissage!!