Comment créer un système de route dans les applications React avec React Router Part 1

Dans React, les routeurs aident à créer et à naviguer entre les différentes URL qui composent votre application web. Ils permettent à votre utilisateur de se déplacer entre les composants de votre application tout en préservant l’état de l’utilisateur, et peuvent fournir des URL uniques pour ces composants afin de les rendre plus partageables. Avec les routeurs, vous pouvez améliorer l’expérience utilisateur de votre application en simplifiant la navigation sur le site.

Il existe plusieurs packages permettant de créer des routes en React mais dans cet article nous allons parler de react-router qui est le package le plus populaire.

Étape 1 — Création du projet et installation de react-router

Dans cette étape, vous allez créer un petit site web sur les Pokémons, chaque Pokémons aura besoin d’un composant distinct qui sera accessible en ajoutant le nom de ce Pokémon a l’URL. Pour ce faire vous allez créer un nouveau projet React a l’aide de la commande create-react-app.

Ensuite vous allez installer le package React Router. Il existe deux versions différentes: une version Web et une version native à utiliser avec React Native . Vous installerez la version Web.

Vous avez maintenant installé le package. Pour le reste de cette étape, vous allez créer une série de composants qui auront chacun une route (URL) unique. Pour commencer, créez un répertoire pour trois Pokémons différents: Bulbizarre, Pikachu et enfin mon préféré Abra . Exécutez les commandes suivantes:

Ensuite, créez un composant pour chaque Pokémon. Ajoutez une <h2> pour afficher le nom de Pokémon.

Commencez par le composant Pikachu. Ouvrez Pikachu.js dans votre éditeur de texte, ajoutez ensuite le composant de base:

Enregistrez et fermez le fichier.

Ensuite, créez un composant Bulbizarre:

Enregistrez et fermez le fichier.

Enfin, créez un fichier pour Abra:

Étape 2 — Ajout de routes

Dans cette étape, vous allez créer un routeur de base avec des routes individuels pour chaque page. Vous utiliserez le <Link>composant pour ajouter des liens à votre projet qui ne déclenchent pas d'actualisation de page.

À la fin de cette étape, vous aurez une application avec une navigation qui affichera vos composants par route.

Pour commencer à ajouter des itinéraires, ouvrez App.js:

Importez tous vos composants

Importer BrowserRouter, Routeet Switchà partir de react-router-dom. BrowserRoutersera la configuration de base. Switchencapsulera les routes dynamiques et le Routecomposant configurera des routes spécifiques et encapsulera le composant qui devrait rendre:

Ajoutez le Routercomposant pour créer un routeur de base, ajoutez aussi le composant Switch.Un Switch parcourt ses fils Route et rend le premier qui correspond à l’URL actuelle. Tout ce qui se trouve a l’extérieur du composant Switch sera rendu sur toutes les pages vous allez alors y ajoutez les liens vers vos composants en utilisant le composantLink

Le composant Link est un composant conçu par react-router, il créera une balise de lien, mais empêchera le comportement par défaut du navigateur tout en vous redirigeant vers le nouvel emplacement.

Le Switchcomposant rendra la première route qui correspond à ce modèle. N'importe quel itinéraire correspondra /, donc il s'affichera sur chaque page. Cela signifie également que l'ordre est important. Puisque le routeur quittera dès qu'il trouvera une correspondance, mettez toujours une route plus spécifique avant une route moins spécifique.

Si vous voulez que l’itinéraire corresponde uniquement à l’itinéraire tel qu’il est écrit et non à des itinéraires enfants, vous pouvez ajouter le exact.

Enregistrez le fichier. Lorsque vous le faites, le navigateur s’actualisera. Si vous visitez http://localhost:3000/ vous aurez ce resultat

Vous vous demandez certainement pourquoi Pikachu est affiché sur la première page, c’est tout simplement parce que vous l’avez définit ainsi au niveau de la déclaration des routes, si vous vous souvenez bien pour le composant Pikachu au niveau de la balise pathnous avons mis path="/"

Cela veut tout simplement dire que si nous sommes sur la page d’accueil charge le composant Pikachu.

Dans cette Part 1, vous avez ajouté React Router à votre projet actuel. Vous avez créé un itinéraire pour chaque composant et vous avez ajouté une navigation à l’aide du Linkcomposant pour basculer entre les itinéraires sans actualisation de la page.

Dans la Part 2, vous allez ajouter des itinéraires plus complexes qui rendent différents composants à l’aide de paramètres d’URL.

Vous pouvez retrouver le code source de cet article sur ce lien