React Router : Gérer la Navigation dans une Application React

Salut à tous !

Cette semaine, je me suis penché sur React Router, un outil indispensable pour gérer la navigation dans une application React. React ne gère pas nativement la navigation entre différentes pageset c’est là qu’intervient React Router.

Pourquoi utiliser React Router ?

Dans une application monopage, React Router permet de simuler la navigation entre plusieurs pages sans recharger complètement le site. Cela permet une expérience utilisateur plus fluide et rapide.

Installation de React Router

Pour utiliser React Router, il faut d’abord l’installer via npm:

npm install react-router-dom

Définir des routes avec BrowserRouter, Routes et Route

React Router fonctionne en enveloppant l’application avec BrowserRouter et en définissant des routes spécifiques.

Exemple basique de navigation

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

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

Dans cet exemple :

• BrowserRouter englobe toute l’application pour permettre la gestion des routes.
• Routes est le conteneur qui regroupe toutes les routes.
• Route définit les différentes routes et les composants à afficher.

Navigation entre les pages avec Link

Pour naviguer entre les pages sans recharger la page, React Router propose le composant Link :

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

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

Contrairement aux balises <a>, Link empêche le rechargement de la page et gère la navigation de manière optimisée.

Récupérer des paramètres d’URL avec useParams

Dans certaines situations, on peut vouloir afficher une page dynamique avec des paramètres d’URL. Par exemple, pour afficher un profil utilisateur selon son ID :

import { useParams } from "react-router-dom";

function UserProfile() {
  let { id } = useParams();
  return <h2>Profil de l'utilisateur {id}</h2>;
}

Dans ce cas, on définit une route dynamique :

<Route path="/user/:id" element={<UserProfile />} />

Lorsqu’un utilisateur visite /user/42, useParams récupère 42 et l’affiche.

Rediriger un utilisateur avec useNavigate

Le hook useNavigate permet de rediriger un utilisateur automatiquement via le code, par exemple après la réussite d'une action :

import { useNavigate } from "react-router-dom";

function Login() {
  let navigate = useNavigate();

  function handleLogin() {
    // Après l’authentification, rediriger l’utilisateur vers la page d’accueil
    navigate("/");
  }

  return <button onClick={handleLogin}>Se connecter</button>;
}

1. useNavigate est utilisé pour obtenir la fonction navigate qui permet la redirection.
2. Lorsqu'on clique sur le bouton "Se connecter", la fonction handleLogin est exécutée.
3. Après le clic sur le bouton, la fonction handleLogin exécute navigate("/"), redirigeant l'utilisateur vers la page d'accueil ("/").

Gestion des routes protégées

On peut restreindre l’accès à certaines pages selon l’état d’authentification de l’utilisateur.

Exemple de route protégée

import { Navigate } from "react-router-dom";

function ProtectedRoute({ children, isAuthenticated }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

1. ProtectedRoute est un composant qui prend deux props :
   • children : le composant React qui est la page protégée à afficher.
   • isAuthenticated : une variable qui indique si l'utilisateur est connecté.
2. Si l’utilisateur est authentifié (true), on affiche children (le contenu protégé).
3. Sinon, on redirige l’utilisateur vers la page de connexion avec <Navigate to="/login" />. Utilisation dans Routes :

<Route path="/dashboard" element={<ProtectedRoute isAuthenticated={userLoggedIn}><Dashboard /></ProtectedRoute>} />

Si userLoggedIn est false, l’utilisateur sera redirigé vers la page de connexion.

Mon ressenti

• React Router est un outil incontournable pour gérer la navigation dans une application React.
• Link et useNavigate permettent une navigation fluide sans recharger la page.
• useParams est très pratique pour gérer des routes dynamiques.
• La gestion des routes protégées est essentielle pour sécuriser une application.

Références

• React Router: A step-by-step guide https://luqmanshaban.medium.com/react-router-a-step-by-step-guide-4c5ec964d2e9 (page consultée le 12 mars2025).

• How to use the useParams hook in React Router https://refine.dev/blog/react-router-useparams/#introduction (page consultée le 12 mars 2025)

• Apprendre React : React router dom - YouTube https://www.youtube.com/watch?v=uhc4Fj2vvu0 (page consultée le 13 mars 2025)

• React Router Tutorial | React For Beginners - YouTube https://www.youtube.com/watch?v=Law7wfdg_ls (page consultée le 12 mars 2025)