Le système de routage en React avec React Router

Le système de routage avec React : les pages et la navigation

Le système de routage permet de gérer la navigation entre différentes pages ou vues dans une application React sans avoir à recharger complètement la page.
react-router-dom est une bibliothèque qui facilite la mise en place du routage dans une application React.

Avec React Router, on définit des routes spécifiques pour différentes pages et on indique quels composants doivent être rendus en fonction de l'URL à atteindre.

Commençons par installer React Router en exécutant ceci dans votre terminal :

npm install react-router-dom

Les routes

Analysons maintenant un exemple de code pour comprendre comment le système de routage fonctionne (il y a plusieurs façon de procéder).
Ici, j'ai effectué mon routage dans un fichier que j'ai nommé AppRouter.js.
J'ai ici la page Home, la page About, la page Erreur 404.

Configuration des routes :
AppRouter.js

import Home from "./pages/Home/Home";
import About from "./pages/About/About";
import Error from "./pages/Error/Error";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";


const AppRouter = () => {
    return (
        <div>
            <Router>
                    <Routes>
                        <Route path="/" element={<Home />} />
                        <Route path="/about" element={<About />} />
                        <Route path="*" element={<Error />} />
                    </Routes>
            </Router>
        </div>
    );
};


export default AppRouter;

• Le composant Router (ou BrowserRouter) englobe l'ensemble de l' application. Il sert de point de départ pour gérer les routes.
• Les routes sont définies à l'intérieur d'un composant Routes. Chaque Route correspond à une URL spécifique et indique quel composant de page afficher lorsque cette URL est atteinte.
• <Route path="/" element={<Home />} /> signifie que lorsque l'URL est exactement "/", le composant de page Home sera rendu.
• <Route path="/about" element={<About />} /> signifie que lorsque l'URL est "/about", le composant de page About sera rendu.
• <Route path="*" element={<Error />} /> signifie que pour toute autre URL qui ne correspond pas aux routes précédentes, le composant de page Error sera rendu.

Ensuite, pour rendre l'application fonctionnelle, on va utiliser le composant AppRouter dans notre point d'entrée, généralement dans le fichier index.js.

import React from "react";
import ReactDOM from "react-dom/client";
import AppRouter from "./AppRouter/AppRouter";


const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <AppRouter />
    </React.StrictMode>
);

<React.StrictMode> est un composant spécial fourni par React qui aide les développeurs à détecter et à corriger des problèmes potentiels dans leurs applications React.

La navigation

Créons un menu de navigation avec les liens vers les différentes pages de notre application.
Voici les étapes à suivre :

1. Création des composants de page : créez les composants pour les différentes pages de votre application, comme Home, About et Contact.
2. Création du composant de menu : créez un composant NavigationMenu.js (par exemple) pour gérer le menu de navigation. Ce composant inclura les liens vers les différentes pages à l'aide de la bibliothèque react-router-dom.

// NavigationMenu.js
import React from 'react';
import { Link } from 'react-router-dom';

const NavigationMenu = () => {
return (
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
);
};

export default NavigationMenu;

Utiliser ensuite le composant de menu : Utilisez le composant NavigationMenu dans votre composant Header (ou là où vous souhaitez afficher le menu de navigation).

// Header.js
import React from 'react';
import NavigationMenu from './NavigationMenu'; // Assurez-vous que le chemin est correct

const Header = () => {
return (
<header>
<h1>Mon Application</h1>
<NavigationMenu />
</header>
);
};

export default Header;

Avec ces étapes, vous aurez un menu de navigation dans votre en-tête qui affiche les liens vers les différentes pages de votre application. Lorsque vous cliquez sur ces liens, le système de routage de react-router-dom affichera le contenu de la page correspondante.