Après avoir configuré le routage de base, mis en place le chargement paresseux et ajouté des composants de secours, l'étape essentielle suivante consiste à offrir aux utilisateurs les moyens de naviguer entre les pages de notre application.

React Router fournit les composants Link et NavLink, analogues à la balise HTML a. Ces composants permettent de mettre à jour l'URL dans la barre d'adresse du navigateur sans recharger l'intégralité de la page.

import { Link } from "react-router-dom";

<Link to="path_value">Any text</Link>

• La propriété to spécifie la route ou le chemin cible vers lequel le lien doit naviguer. Remplacez path_value par le chemin souhaité ;
• Any text correspond au contenu affiché comme lien. Vous pouvez le remplacer par le texte ou le contenu JSX désiré.

Exemple

Créons un composant séparé appelé Bar pour gérer la navigation de toute l'application. Voici le code :

const Bar = () => {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contacts">Contacts</Link>
        </li>
      </ul>
      <hr />
    </nav>
  );
};

Ce code définit un composant fonctionnel nommé Bar, qui représente une barre de navigation. Il affiche un élément <nav> contenant une liste non ordonnée <ul> avec trois éléments de liste <li>. Chaque élément de liste inclut un composant Link provenant de la bibliothèque react-router-dom.

• Ligne 6 : Le premier composant Link représente un lien vers la page "Home" ;
• Ligne 9 : Le deuxième composant Link représente un lien vers la page "About" ;
• Ligne 12 : Le troisième composant Link représente un lien vers la page "Contacts".

Ces composants Link permettent la navigation au sein de l'application en mettant à jour l'URL dans la barre d'adresse du navigateur sans recharger la page. Lorsqu'un utilisateur clique sur un lien, la route ou le chemin correspondant est activé et le composant associé sera affiché.