React Router 7.9 : Middleware sans douleur

React Router est depuis longtemps devenu la norme pour le routage dans le monde React. Mais la version 7.9 a apporté ce que beaucoup attendaient depuis des années - Middleware API. Maintenant, vous pouvez intégrer des contrôles d'accès, des données de préchargement et d'autres « couches » directement dans les itinéraires, sans béquilles inutiles.

Qu'est-ce que Middleware dans React Router ?

Si auparavant il fallait construire useEffect, des contextes ou envelopper des routes dans HOC, maintenant tout est résolu élégamment :

• Contrôles d'accès (par exemple, rôle d'utilisateur)

• Redirections (si non autorisé - vers la page de connexion)

• Chargement des données avant le rendu de la page

• Journalisation et métriques

Middleware sont des fonctions qui sont exécutées avant le rendu du composant, et peuvent soit autoriser la transition, soit la modifier.

Exemple : vérification de l'autorisation

import { createBrowserRouter, RouterProvider } from "react-router";
import App from "./App";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";

const requireAuth = async ({ context, next }) => {
  if (!context.user) {
    return Response.redirect("/login");
  }
  return next();
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
        middleware: [requireAuth]
      },
      {
        path: "login",
        element: <Login />
      }
    ]
  }
]);

export default function Root() {
  return <RouterProvider router={router} />;
}
  

Désormais, la protection des itinéraires est intégrée au routeur lui-même, il n'est pas nécessaire de réinventer la roue.

Préchargement des données avant le rendu

const preloadUser = async ({ next }) => {
  const user = await fetch("/api/me").then(r => r.json());
  return next({ context: { user } });
};

const router = createBrowserRouter([
  {
    path: "/profile",
    element: <Profile />,
    middleware: [preloadUser]
  }
]);
  

Désormais, dans le composant Profile, les données seront disponibles immédiatement, sans le clignotant « Chargement... ».

Comparaison avec les approches précédentes

1. HOC (Higher-Order Components)

function withAuth(Component) {
  return function Wrapped(props) {
    const user = useUser();
    if (!user) return <Navigate to="/login" />;
    return <Component {...props} />;
  }
}
  

❌ Inconvénients : duplication de code, plus difficile à gérer les flux de données, l'imbrication des composants augmente.

2. useEffect + Navigate

function Dashboard() {
  const user = useUser();
  const navigate = useNavigate();

  useEffect(() => {
    if (!user) navigate("/login");
  }, [user]);

  return <div>Dashboard</div>;
}
  

❌ Inconvénients : le composant est d'abord monté, puis la redirection se produit — les utilisateurs voient un « clignotement ».

3. Middleware API (nouvelle approche)

✅ Tout est dans l'itinéraire, sans « clignotement », code lisible et centralisé.

Pourquoi est-ce cool ?

• Code plus propre — les itinéraires deviennent un point unique pour la logique d'accès et de chargement.

• UX plus rapide — préchargement des données avant le rendu.

• Flexibilité — vous pouvez écrire votre middleware pour tous les besoins (journalisation, analyse, indicateurs de fonctionnalité).

Mais ! Middleware fonctionne de manière asynchrone, donc avec un grand nombre de contrôles, il vaut la peine de penser aux performances et de mettre en cache les résultats.

React Router 7.9 a fait ce qu'on attendait de lui : il a transformé le routage en poste central de contrôle d'accès et de données. L'API Middleware ouvre la voie à des applications plus prévisibles et plus précises.

Dans Codique nous simplifions l'apprentissage de la programmation : cours de Go, JavaScript, Python et autres technologies, le tout dans une seule application.

Et nous avons aussi un confortable Chaîne Telegram, où nous discutons des dernières nouvelles du monde du développement, partageons des idées et analysons ensemble les nouvelles fonctionnalités. Rejoignez-nouspour apprendre et grandir dans l'informatique avec des personnes partageant les mêmes idées !