React Router v7+ Knowledge Patch Skill

React Router v7+ Knowledge Patch

Claude's baseline knowledge covers React Router v6 (createBrowserRouter, RouterProvider, loaders/actions, nested routing, data routers) and Remix v2 (file-based routing, Vite plugin, loaders/actions).

This skill provides features from v7.0 (November 2024) through v7.14 (April 2025). React Router v7 merges Remix into React Router.

Three Modes

| Mode | Entry Point | Use Case | |------|-------------|----------| | Declarative | <BrowserRouter> | Classic client-side routing | | Data | createBrowserRouter | Client-side with loaders/actions | | Framework | Vite plugin + routes.ts | Full-stack SSR/SPA (all new APIs) |

Framework mode is where all the new APIs live.

Quick Reference

routes.ts Helpers

| Helper | Purpose | Example | |--------|---------|---------| | route(path, file, children?) | Named route | route("products/:pid", "./product.tsx") | | index(file) | Index route | index("./home.tsx") | | layout(file, children) | Layout wrapper | layout("./marketing-layout.tsx", [...]) | | prefix(path, children) | Path prefix | prefix("api", [...]) | | flatRoutes() | File-based (Remix-style) | import { flatRoutes } from "@react-router/fs-routes" |

All from @react-router/dev/routes. See references/framework-mode.md.

routes.ts Example

import { type RouteConfig, route, index, layout, prefix } from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("products/:pid", "./product.tsx"),
  layout("./marketing-layout.tsx", [
    route("about", "./about.tsx"),
  ]),
  ...prefix("api", [
    route("users", "./api/users.tsx"),
  ]),
] satisfies RouteConfig;

react-router.config.ts Example

import type { Config } from "@react-router/dev/config";

export default {
  ssr: true,              // false for SPA mode
  prerender: ["/", "/about"],  // or true for all static paths, or async function
  appDirectory: "app",
  buildDirectory: "build",
} satisfies Config;

Pre-render can also be async: prerender: async ({ getStaticPaths }) => [...getStaticPaths(), ...dynamicPaths].

Generated Route Types

| Type | Use For | |------|---------| | Route.LoaderArgs | Server loader parameters | | Route.ActionArgs | Server action parameters | | Route.ClientLoaderArgs | Client loader parameters | | Route.ClientActionArgs | Client action parameters | | Route.ComponentProps | Route component props (loaderData, actionData, params, matches) | | Route.ErrorBoundaryProps | Error boundary props | | Route.HydrateFallbackProps | Hydration fallback props | | Route.MiddlewareFunction | Server middleware type | | Route.ClientMiddlewareFunction | Client middleware type |

Import per-route: import type { Route } from "./+types/product". Requires "rootDirs": [".", "./.react-router/types"] in tsconfig.

Type-Safe Route Module Example

import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  // params.pid is typed as string
  return { product: await getProduct(params.pid) };
}

export default function Product({ loaderData }: Route.ComponentProps) {
  return <div>{loaderData.product.name}</div>;
}

Components receive typed props (loaderData, actionData, params, matches) directly — can replace useLoaderData()/useParams() hooks. See references/type-safe-routes.md.

react-router.config.ts

| Option | Type | Purpose | |--------|------|---------| | ssr | boolean | true for SSR, false for SPA mode | | prerender | string[] \| boolean \| async fn | Static pre-rendering paths | | appDirectory | string | App source dir (default: "app") | | buildDirectory | string | Build output dir (default: "build") | | future | object | Future flags (e.g., { v8_middleware: true }) |

See references/framework-mode.md.

Middleware (v8_middleware future flag)

| Concept | Detail | |---------|--------| | Enable | future: { v8_middleware: true } in config | | Context | createContext<T>() from "react-router" | | Set context | context.set(myContext, value) | | Get context | context.get(myContext) in loaders/actions | | Server export | export const middleware: Route.MiddlewareFunction[] | | Client export | export const clientMiddleware: Route.ClientMiddlewareFunction[] | | Data mode | Attach middleware array to route objects |

Middleware Example

import { createContext } from "react-router";
const userContext = createContext<User | null>(null);

export const middleware: Route.MiddlewareFunction[] = [
  async function auth({ request, context }, next) {
    const user = await getUser(request);
    if (!user) throw redirect("/login");
    context.set(userContext, user);
    let response = await next();
    return response;
  },
];

export async function loader({ context }: Route.LoaderArgs) {
  const user = context.get(userContext);
  return { profile: await getProfile(user) };
}

See references/middleware.md for client middleware, Data mode, and custom server setup.

Topic References

Framework Mode — routes.ts config, file-based routing, react-router.config.ts, pre-rendering
Type-Safe Routes — Auto-generated types, Route.* types, tsconfig setup, component props
Middleware — Server/client middleware, typed context API, Data mode integration

Agent Skills: React Router v7+ Knowledge Patch

Install this agent skill to your local

Skill Files