React Router

Bonjour à tous, c’est Ismail. Pour ce blog, j’apprends React Router, un outil essentiel pour gérer la navigation entre différentes pages dans une application React. Comprendre React Router permet de créer des interfaces multi-pages fluides et dynamiques.

Qu’est-ce que React Router ?

React Router est une bibliothèque qui permet d’ajouter des routes à une application React en gérant la navigation sans recharger la page. Cela améliore l’expérience utilisateur en rendant l’application plus fluide.

Installation

Pour commencer, il faut installer React Router via npm ou yarn :

npm install react-router-dom
# ou avec yarn
yarn add react-router-dom

Définition des Routes

Dans une application React, on définit des routes avec le composant <Route>, souvent encapsulé dans un <BrowserRouter>. Voici un exemple simple :

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

Explication du Code

• <BrowserRouter> : Fournit l’historique de navigation à l’application.
• <Routes> : Contient l’ensemble des routes définies.
• <Route> : Associe un chemin (path) à un composant (element).

Navigation avec Link

Pour naviguer entre les pages sans recharger la page, on utilise le composant <Link> au lieu de <a> classique.

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Accueil</Link>
      <Link to="/about">À propos</Link>
    </nav>
  );
}

export default Navbar;

Mon Avis et Conseils

Après avoir exploré React Router, voici ce que j’en retiens : Il facilite la gestion des routes sans rechargement de page. La structure des composants reste propre et claire. Il s’intègre facilement avec le state global et d’autres outils.

Conseils :

• Toujours encapsuler les routes dans <Routes> pour éviter les erreurs.
• Utiliser <Link> pour une navigation fluide sans rechargement.
• Bien structurer les routes pour éviter les conflits.

La semaine prochaine, je parlerai de la gestion du contexte avec React Context API.

Source :

• React Router Docs, Knowbody, https://knowbody.github.io/react-router-docs/ (Page consulté le 27 février 2025)

• W3Schools, W3Schools, https://www.w3schools.com/react/react_router.asp (Page consulté le 27 février 2025)