Activation du Routage dans une Application React
Une fois les dépendances nécessaires installées, il est possible d'intégrer la bibliothèque dans l'application.
Pour ajouter la fonctionnalité de routage à l'application, il est nécessaire d'entourer le composant racine avec BrowserRouter
provenant de la bibliothèque react-router-dom
. Cette étape est essentielle car elle initialise le système de routage et permet de gérer la navigation en fonction de l'URL.
Exemple
- Ouvrir le fichier
index.js
du projet ; - Importer le composant
BrowserRouter
depuis la bibliothèquereact-router-dom
:
import { BrowserRouter } from "react-router-dom";
- Entourer le composant
App
avec le composantBrowserRouter
, comme illustré ci-dessous (lignes 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 entourant le composant App
avec BrowserRouter
, la fonctionnalité de routage devient disponible dans l'application.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 4.17
Activation du Routage dans une Application React
Glissez pour afficher le menu
Une fois les dépendances nécessaires installées, il est possible d'intégrer la bibliothèque dans l'application.
Pour ajouter la fonctionnalité de routage à l'application, il est nécessaire d'entourer le composant racine avec BrowserRouter
provenant de la bibliothèque react-router-dom
. Cette étape est essentielle car elle initialise le système de routage et permet de gérer la navigation en fonction de l'URL.
Exemple
- Ouvrir le fichier
index.js
du projet ; - Importer le composant
BrowserRouter
depuis la bibliothèquereact-router-dom
:
import { BrowserRouter } from "react-router-dom";
- Entourer le composant
App
avec le composantBrowserRouter
, comme illustré ci-dessous (lignes 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 entourant le composant App
avec BrowserRouter
, la fonctionnalité de routage devient disponible dans l'application.
Merci pour vos commentaires !