React Router

React Router est la bibliothèque de routage déclarative standard pour les applications React.

Elle permet de mapper des URL à des composants React spécifiques, gérant la navigation entre vues sans rechargement de page, ce qui en fait un pilier des Single Page Applications (SPA).

Elle permet la navigation entre composants.

Fonctionnalités clés

Dans React Router v6, pour configurer une route avec le composant <Route>, deux paramètres sont strictement obligatoires :

• path : chaîne de caractères définissant le chemin d’URL correspondant à la route (ex: "/contact").
• element : élément JSX React à afficher lorsque la route correspond. Attention : il faut passer <Composant /> (JSX), pas Composant seul.

Ces deux props sont requis pour chaque <Route> (sauf pour les routes index, qui utilisent index à la place de path).

Le composant <Routes> doit englober toutes les routes, et l’ensemble doit être enveloppé par <BrowserRouter>.

Exemple minimaliste (main.jsx)

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import Profile from './Profile';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Accueil</Link> | 
        <Link to="/profile/stephane">Profil</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile/:username" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

Reactrouter.com

À retenir

• Pas inclus dans React : bibliothèque tierce maintenue par Remix Software (équipe derrière Remix).
• SPA-centric : conçu pour les applications monopage ; nécessite une configuration spécifique pour le SEO (SSR/SSG via Next.js, Remix, ou prerendering).
• Évolution majeure : la v6 (2021) a radicalement simplifié l’API (remplacement de component/render par element, introduction des nested routes).
• Alternative moderne : depuis 2023, TanStack Router gagne en popularité, mais React Router reste la référence industrielle en 2026.