React Router v8: ESM-Only, Middleware On, Node 22 Now

React Router v8 landed on June 17. It requires Node 22, ships ESM only, and turns middleware on by default — no flags, no opt-in. With 51 million weekly npm downloads, this is not a niche release. Three breaking changes will catch teams off guard. Here is what actually changed and what needs fixing before your next deploy.

Three Breaking Changes That Will Hit You

The upgrade is smooth if you adopted v7’s future flags — but the following changes are mandatory and will break builds if ignored.

react-router-dom is gone. The package was a compatibility shim for the v6-to-v7 transition. It no longer exists. Every file importing from it needs to swap to react-router or react-router/dom:

// Before
import { Link, useNavigate } from "react-router-dom";

// After
import { Link, useNavigate } from "react-router";

AppLoadContext is removed. If you use a custom server with getLoadContext — Express, Fastify, or anything else — the old AppLoadContext type is gone. Migrate to the new typed context API using unstable_RouterContextProvider, unstable_createContext, and context.set() / context.get(). The official upgrade guide covers the migration steps. This is the change most likely to require real engineering time.

meta() data parameter removed. The deprecated data field in route module meta() functions is gone. Use loaderData instead:

// Before (v7, deprecated)
export function meta({ data }) {
  return [{ title: data.title }];
}

// After (v8)
export function meta({ loaderData }) {
  return [{ title: loaderData.title }];
}

Middleware Is Now the Default Architecture

Most coverage lists middleware as a bullet point. It deserves more attention. In v8, middleware is not a feature you enable — it is how React Router processes every request. The v8_middleware future flag is gone because the behavior it enabled is now mandatory.

This matters because React Router had a longstanding design flaw: a redirect in a parent route did not stop child loaders from executing in parallel. Child loaders fired anyway, wasting requests and occasionally producing incorrect state. Middleware enforces sequential execution — parent middleware runs to completion before child loaders start. A redirect at the root returns immediately without touching anything below it.

For auth flows, this is a genuine improvement. A single root middleware can check the session and redirect to /login. No child loader runs. No redundant fetches:

export async function middleware({ request, context }, next) {
  const session = await getSession(request);
  if (!session.userId) return redirect("/login");
  context.set(userContext, session.user);
  return next();
}

If your team handled auth inside individual loaders, middleware centralizes that logic. It is worth the refactor.

ESM-Only and the Node 22 Requirement

React Router v8 publishes ESM only. CommonJS builds are gone. This required bumping the Node minimum to 22.22.0 — earlier Node versions need experimental flags to require() an ESM package. Node 22.22+ handles it without flags. Node 20 does not, and Node 20 reached EOL in April 2026 anyway.

The new baselines are Node 22.22.0+, React 19.2.7+, and Vite 7.0.0+. If your CI pipeline, Docker base image, or hosting environment is still on Node 20, that upgrade comes first — before you touch React Router.

Netlify shipped React Router v8 support on June 18, one day after the announcement. Vercel and Cloudflare both have official templates. Teams on Cloudflare Workers need to switch from @react-router/dev/vite/cloudflare to @cloudflare/vite-plugin — the old proxy is removed.

How Smooth Is the Upgrade, Really?

React Router called this “the most boring upgrade yet.” That is accurate — conditional on having adopted v7’s future flags. If your react-router.config.ts had future.v8_middleware, future.v8_viteEnvironmentApi, and future.v8_splitRouteModules enabled, v8 is: remove the future block, swap imports, update Node/React/Vite, fix meta() calls, and migrate getLoadContext if needed. A few hours for a typical app.

If you skipped v7 future flags: do not jump straight to v8. Adopt the flags in v7 first, run your test suite, fix issues, then move to v8. Combining both migrations without the flag step is significantly more error-prone.

A Word on TanStack Router

React Router v8 will not resolve the competitive question that keeps coming up. TanStack Router offers full TypeScript-safe route definitions, type-checked navigation, and better benchmark numbers. React Router v8 is the right choice for the millions of existing apps already on v7. For new projects starting in 2026, the honest recommendation is to evaluate TanStack Router before defaulting to React Router. v8 is an excellent maintenance release — not a feature leap.

What to Do Now

• Check your Node version: must be 22.22.0+
• Audit imports from react-router-dom: swap to react-router / react-router/dom
• Find any meta({ data }) functions: rename to loaderData
• If using a custom server: read the upgrade guide’s getLoadContext section before upgrading
• Cloudflare deployments: switch to @cloudflare/vite-plugin
• Read the full announcement and the changelog before you start