Activation de la Fonctionnalité de Routage
Une fois que nous avons installé les dépendances nécessaires, nous pouvons procéder à l'intégration de la bibliothèque dans notre application.
Pour intégrer la fonctionnalité de routage dans notre application, nous devons envelopper le composant racine avec BrowserRouter
de la bibliothèque react-router-dom
. Cette étape est cruciale car elle initialise le système de routage et nous permet de gérer la navigation en fonction de l'URL.
Exemple
- Ouvrez le fichier
index.js
dans votre projet ; - Importez le composant
BrowserRouter
de la bibliothèquereact-router-dom
:
import { BrowserRouter } from "react-router-dom";
- Enveloppez le composant
App
avec le composantBrowserRouter
, comme indiqué ci-dessous (ligne 9-11) :
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App/App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
En enveloppant le composant App
avec BrowserRouter
, nous rendons la fonctionnalité de routage disponible dans notre application.
Tout était clair ?
Merci pour vos commentaires !
Section 2. Chapitre 3