Après avoir configuré le routage de base, implémenté le chargement paresseux et ajouté des composants de repli, l'étape essentielle suivante est de fournir aux utilisateurs les moyens de naviguer à travers les pages de notre application.

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

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

<Link to="path_value">Any text</Link>
```
- Le prop `to` spécifie la route ou le chemin cible vers lequel le lien doit naviguer. Remplacez `path_value` par le chemin souhaité pour le lien;
- `Any text` est le contenu qui sera affiché comme lien. Vous pouvez le remplacer par le texte désiré ou du contenu JSX.

## Exemple
Créons un composant séparé appelé Bar pour gérer la navigation de l'ensemble de l'application. Voici le code :
```js
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 appelé `Bar`, qui représente une barre de navigation. Il rend 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` 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 rendu.

Plongez dans le monde du routage au sein des applications React et découvrez comment React Router simplifie la gestion de la navigation, de l'état des URL et du rendu dynamique des composants, tout en réponse à l'URL actuelle.

Apprenez les bases théoriques de concepts tels que l'URL, le domaine, le protocole, les paramètres de requête, et plus encore. Comprenez l'importance du routage dans les applications web et pourquoi nous avons besoin de la bibliothèque React Router.

Découvrez comment créer une application React complète à partir de zéro, avec la capacité d'afficher du contenu qui s'adapte en fonction de l'URL en utilisant la fonctionnalité de React Router.

Explorez l'utilisation des chaînes de requête pour partager et gérer l'état de l'application via les URL, travaillez avec différents types de données dans les paramètres de requête, et utilisez React Router pour la navigation et les effets basés sur les changements d'URL.

React Router

Créer une Navigation

Exemple