Middleware (React Router v8)

Définition

Fonctions exécutées autour des loaders et actions d'une route, activées par défaut depuis React Router v8 (17 juin 2026, plus de flag future.v8_middleware) en modes data et framework. Le middleware serveur reçoit { request, context } et next(), s'enchaîne parent → enfant puis remonte, et doit retourner une Response. Le contexte est typé via createContext / context.set / context.get ; un clientMiddleware existe pour le navigateur.

Analogie

Les sas successifs d'un bâtiment sécurisé : chaque porte vérifie quelque chose avant de laisser passer vers la salle, et on ressort par les mêmes portes.

Exemple de code

import { createContext, redirect } from 'react-router';
import type { Route } from './+types/dashboard';

export const userContext = createContext<User | null>(null);

async function auth({ request, context }: Route.MiddlewareArgs, next) {
  const user = await getUserFromSession(request);
  if (!user) throw redirect('/login');
  context.set(userContext, user);
  return next();                 // Response obligatoire côté serveur
}
export const middleware: Route.MiddlewareFunction[] = [auth];
export async function loader({ context }: Route.LoaderArgs) {
  return { user: context.get(userContext) }; // garanti non nul
}

Cas d'usage

Authentification et autorisation par segment de route, journalisation, injection de dépendances (client BDD) dans les loaders.

Anti-pattern

Termes liés

Sources

• reactrouter.com/how-to/middleware
• reactrouter.com/changelog