React Router v7: Full-Stack Framework Mode with Remix DNA

React Router v7 is a landmark release that merges the Remix framework directly into the React Router package. Teams can now choose between three modes: pure SPA, SSR with data loading, or a full Remix-style full-stack setup — all from the same library.

Three Modes

1. Declarative (v6 compatible) — classic JSX-based routing, no changes required
2. Data Mode — loaders and actions without a server, great for Vite SPAs
3. Framework Mode — full Remix-style SSR, type-safe params, server actions

Type-Safe Route Params (Framework Mode)

// app/routes/users.$id.tsx
import type { Route } from "./+types/users.$id";

export async function loader({ params }: Route.LoaderArgs) {
    // params.id is typed as string — no casting needed
    return { user: await fetchUser(params.id) };
}

export default function UserPage({ loaderData }: Route.ComponentProps) {
    return <h1>{loaderData.user.name}</h1>;
}

Vite Plugin

Framework mode ships with a first-party Vite plugin that handles SSR bundling, code splitting per route, and pre-rendering for static routes:

npm install react-router@7 @react-router/dev

Migrating from Remix

The Remix team provides an automated migration guide — most Remix v2 apps upgrade to React Router v7 framework mode by changing a handful of imports.