Skip to content
Learni
Voir tous les tutoriels
Frontend

Comment maîtriser React Router v6.4+ en 2026

18 minINTERMEDIATE
ReactTypeScriptReact Router
Read in English

Introduction

React Router v6.4 a introduit un nouveau paradigme basé sur les data routers qui simplifie le chargement de données et la gestion des formulaires. Ce tutoriel vous guide pas à pas pour créer une application SPA robuste avec des routes imbriquées, des loaders et des actions. Vous apprendrez à gérer l'état de navigation, à protéger des routes et à optimiser les performances. Chaque concept est illustré par du code TypeScript prêt à l'emploi.

Prérequis

  • Node.js 18+
  • React 18+ et TypeScript
  • Connaissances de base de React et des hooks
  • npm ou yarn installé

Installation et configuration

terminal
npm create vite@latest my-app -- --template react-ts
cd my-app
npm install react-router-dom@latest

Cette commande crée un projet Vite avec TypeScript et installe la dernière version de React Router. Vite offre un environnement de développement rapide et moderne.

Créer le routeur principal

src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Root from './routes/Root';
import Home from './routes/Home';

const router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    children: [
      { index: true, element: <Home /> }
    ]
  }
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

On utilise createBrowserRouter pour définir la structure des routes. RouterProvider remplace BrowserRouter et active les fonctionnalités de data loading.

Routes imbriquées et Outlet

src/routes/Root.tsx
import { Outlet, Link } from 'react-router-dom';

export default function Root() {
  return (
    <div>
      <nav>
        <Link to="/">Accueil</Link>
        <Link to="/dashboard">Dashboard</Link>
      </nav>
      <main>
        <Outlet />
      </main>
    </div>
  );
}

Outlet rend les routes enfants. Les liens Link permettent une navigation client-side sans rechargement de page.

Loader pour le fetching de données

src/routes/Dashboard.tsx
import { useLoaderData } from 'react-router-dom';

export async function loader() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  return res.json();
}

export default function Dashboard() {
  const posts = useLoaderData() as any[];
  return (
    <div>
      <h1>Posts</h1>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </div>
  );
}

Le loader s'exécute avant le rendu du composant. useLoaderData récupère les données de manière synchrone dans le composant.

Action et gestion de formulaire

src/routes/NewPost.tsx
import { Form, redirect } from 'react-router-dom';

export async function action({ request }: { request: Request }) {
  const formData = await request.formData();
  await fetch('https://jsonplaceholder.typicode.com/posts', {
    method: 'POST',
    body: formData
  });
  return redirect('/dashboard');
}

export default function NewPost() {
  return (
    <Form method="post">
      <input name="title" required />
      <button type="submit">Créer</button>
    </Form>
  );
}

Les actions interceptent les soumissions de formulaires. redirect permet de naviguer après une mutation réussie.

Route protégée avec loader

src/routes/Protected.tsx
import { redirect, LoaderFunctionArgs } from 'react-router-dom';

export async function protectedLoader({ request }: LoaderFunctionArgs) {
  const isLoggedIn = localStorage.getItem('token');
  if (!isLoggedIn) {
    return redirect('/login?redirectTo=' + new URL(request.url).pathname);
  }
  return null;
}

Un loader peut rediriger l'utilisateur avant le rendu. Cela protège efficacement les routes sensibles.

Bonnes pratiques

  • Toujours typer les données retournées par les loaders
  • Utiliser errorElement pour gérer les erreurs de chargement
  • Préférer les routes basées sur les données plutôt que useEffect
  • Séparer les loaders et actions dans des fichiers dédiés
  • Tester les redirections avec des tests d'intégration

Erreurs courantes à éviter

  • Oublier d'importer et d'utiliser RouterProvider
  • Appeler des hooks de React Router en dehors d'un routeur
  • Ne pas gérer les erreurs async dans les loaders
  • Utiliser des chemins relatifs incorrects dans les liens imbriqués

Pour aller plus loin

Découvrez nos formations avancées sur React et l'écosystème moderne : https://learni-group.com/formations