React Router v6

Définition

Librairie de routage de référence pour React. La v6 (routes imbriquées, loaders, actions) reste maintenue (6.30.6 le 18 août 2026), mais la v7 (22 novembre 2024) a fusionné Remix dans React Router et ajouté le « framework mode » ; la v8 (17 juin 2026, dernière 8.4.0 le 15 septembre 2026) est ESM uniquement, supprime react-router-dom au profit du seul paquet react-router, et exige React 19.2.7+.

Analogie

Comme le plan d'un centre commercial avec les flèches directionnelles : chaque URL mène a la bonne boutique (composant).

Exemple de code

// v7/v8 : un seul paquet, `Component` remplace `element`
import { createBrowserRouter, RouterProvider } from 'react-router';

const router = createBrowserRouter([
  {
    path: '/',
    Component: Layout,
    children: [
      { index: true, Component: Home },
      { path: 'users/:id', Component: User, loader: userLoader },
    ],
  },
]);
createRoot(root).render(<RouterProvider router={router} />);

Cas d'usage

SPA Vite + React en mode déclaratif ou data ; application full-stack (SSR, pré-rendu, typage des routes) en mode framework, alternative directe à Next.js.

Anti-pattern

Démarrer un projet neuf en v6 ou avec react-router-dom : ce paquet n'existe plus en v8, tout s'importe depuis react-router.

Termes liés

En entretien

Quelle différence entre React Router v6 et les versions plus récentes v7/v8 ?
La v6 reste maintenue avec routes imbriquées, loaders et actions, mais la v7 (22 novembre 2024) a fusionné Remix et ajouté le framework mode, et la v8 (17 juin 2026) est ESM uniquement et supprime react-router-dom au profit du seul paquet react-router. La v8 exige aussi React 19.2.7+.
Quel piège éviter si tu démarres un projet aujourd'hui ?
Démarrer un projet neuf en v6 ou avec react-router-dom, car ce paquet n'existe plus en v8 : tout s'importe désormais depuis react-router. C'est comme le plan d'un centre commercial dont les flèches directionnelles doivent pointer vers le bon import.