React Router — Framework Mode

React 🟡 Mid

Définition

Mode le plus complet de React Router, hérité de Remix lors de la fusion dans la v7 (22 novembre 2024) et pleinement stable en v8 (17 juin 2026, dernière 8.4.0 le 15 septembre 2026). Il ajoute au mode data l'intégration Vite : routes.ts, modules de route typés (Route.LoaderArgs, Route.ComponentProps, href typé), découpage automatique, SSR, pré-rendu statique ou SPA. Le support des Server Components y reste expérimental (RSCHydratedRouter, routeRSCServerRequest, via @vitejs/plugin-rsc).

Analogie

Le même vélo (le routeur), mais livré avec cadre, freins et éclairage montés : prêt à rouler sur route ouverte.

Exemple de code

// app/routes.ts
import { index, route } from '@react-router/dev/routes';
export default [index('./home.tsx'), route('products/:pid', './product.tsx')];

// app/product.tsx — module de route
import type { Route } from './+types/product';
export async function loader({ params }: Route.LoaderArgs) {
  return { product: await getProduct(params.pid) };
}
export default function Product({ loaderData }: Route.ComponentProps) {
  return <h1>{loaderData.product.name}</h1>;
}

Cas d'usage

Application full-stack React sans Next.js, déployable sur Node, Docker ou Cloudflare Workers ; migration d'un projet Remix v2.

Anti-pattern

Mélanger les modes (BrowserRouter déclaratif dans un projet framework) ou mettre en production les API RSC marquées expérimentales sans suivre les notes de version.

Termes liés

#routing#framework#fullstack#interview

En entretien

Explique-moi ce qu'est le Framework Mode de React Router.
C'est le mode le plus complet de React Router, hérité de Remix lors de la fusion dans la v7 (22 novembre 2024) et pleinement stable en v8, qui ajoute l'intégration Vite avec des routes.ts, des modules de route typés et le SSR ou le pré-rendu statique. C'est comme le même vélo mais livré avec cadre, freins et éclairage montés, prêt à rouler.
Quand est-ce que tu choisirais le Framework Mode plutôt qu'un mode plus simple ?
Pour une application full-stack React sans Next.js, déployable sur Node, Docker ou Cloudflare Workers, ou pour migrer un projet Remix v2. L'anti-pattern est de mélanger les modes, comme utiliser un BrowserRouter déclaratif dans un projet framework, ou de mettre en prod les API RSC encore expérimentales sans suivre les notes de version.

Sources

Fiche mise à jour le 2026-09-27