Maintenant que nous avons enveloppé notre application avec `BrowserRouter` pour activer le routage, la prochaine étape consiste à spécifier les routes (chemins) que notre application inclura. Ces routes déterminent la structure globale de l'application et contrôlent le contenu affiché en fonction de l'URL.

React Router fournit deux composants essentiels pour définir les routes : `Routes` et `Route`. Le composant `Routes` agit comme un conteneur pour toutes les définitions de routes, tandis que le composant `Route` représente une configuration de route spécifique.

Voici la syntaxe pour définir des routes :
```js
<Routes>
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
  <Route path="<path_value>" element={<component_to_render>} />
</Routes>
```
Dans cette structure :
- `<path_value>` : Spécifie la configuration de l'URL pour la route ;
- `<component_to_render>` : Détermine le composant à rendre lorsqu'un utilisateur navigue vers ce chemin spécifique.

## Exemple
Appliquons ce concept à notre projet. Ouvrez le fichier `App.jsx` et importez les composants `Routes` et `Route` de la bibliothèque `react-router-dom` :
```js
import { Routes, Route } from "react-router-dom";
```
Dans l'instruction `return` du composant `App`, définissez les routes pour notre application :
```js
const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/contacts" element={<ContactsPage />} />
      </Routes>
    </>
  );
};
```
**Explication du code** :
- Ligne 4, 8 : `<Routes>` : Ce composant sert de conteneur pour définir les routes dans l'application, agissant comme un composant parent pour les définitions de routes individuelles ;
- Ligne 5 : `<Route>` : Représente une définition de route. Il spécifie que lorsque le chemin URL correspond à `/`, le composant `<HomePage />` doit être rendu ;
- Ligne 6 : `<Route>` : Définit une autre route. Lorsque le chemin URL correspond à `/about`, le composant `<AboutPage />` sera rendu ;
- Ligne 7 : `<Route>` : Définit une autre route. Lorsque le chemin URL correspond à `/contacts`, le composant `<ContactsPage />` 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

Définir les Routes

Exemple