Routage côté client dans React Router
Dans cette leçon, nous examinerons une composante importante des applications monopages (SPA) - le routage côté client. Un tel routage nous permet de mettre à jour l'URL dans le navigateur sans requêtes supplémentaires pour le document auprès du serveur.
Démarrez l'application que nous avons créée lors de la
leçon précédente. Ouvrez le panneau de développement et
dans celui-ci, l'onglet 'Réseau' (Network pour Chrome).
Après chaque clic sur nos liens, nous
voyons à chaque fois une requête pour le document. C'est-à-dire
que nous demandons à chaque fois au serveur de nous recharger
le document.
Utilisons maintenant les avantages de
React Router pour nous débarrasser de ce type de
requêtes. Pour ce faire, ouvrons root.jsx
de notre application et remplaçons la balise a
du balisage par le composant Link. Pour
commencer, ajoutons son import :
import { Outlet, Link } from 'react-router-dom';
Maintenant, remplaçons les balises a avec l'attribut
href. Au lieu du morceau de code :
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Nous aurons maintenant le code suivant :
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Ouvrons à nouveau l'onglet 'Réseau' dans le
panneau de développement, définissons le chemin racine dans la barre d'adresse
et actualisons la page. Maintenant, cliquons sur les liens
et voyons que le document n'a été demandé
qu'une seule fois lors du chargement initial
et que lors des clics suivants, il n'y a plus de requête
vers le serveur.
Prenez l'application que vous avez créée dans les travaux dirigés des leçons précédentes. En utilisant le matériel de la leçon, implémentez-y le routage côté client, en modifiant vos liens comme décrit dans la leçon.
