React Router — Framework Mode

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

Termes liés

Sources

• reactrouter.com/start/modes
• reactrouter.com/changelog
• reactrouter.com/how-to/react-server-components