react-router: Skill for Claude Code

React Router

React Router is mode-specific. Before changing an app, identify the mode, load the matching reference, then read the installed docs for the installed package version.

Identify the Mode

Do not apply Framework/Data patterns to a Declarative app unless you are intentionally migrating modes.

Framework Mode

Use Framework Mode guidance when you see:

• @react-router/dev in dependencies
• react-router.config.ts
• app/routes.ts
• app/entry.server.tsx and/or app/entry.client.tsx files
• route modules under app/routes/
• route exports like loader, action, clientLoader, clientAction, ErrorBoundary, meta, links, or headers
• imports from ./+types/...
• the React Router Vite plugin from @react-router/dev/vite

Framework examples usually use the default app/ directory, but check react-router.config.ts for a custom appDirectory before assuming exact paths.

Then read references/framework-mode.md.

Data Mode

Use Data Mode guidance when you see:

• createBrowserRouter, createHashRouter, createMemoryRouter, or createStaticRouter
• <RouterProvider router={router}>
• route objects with properties like path, children, loader, action, Component, ErrorBoundary, or lazy
• data APIs without the Framework Vite plugin

Then read references/data-mode.md.

Declarative Mode

Use Declarative Mode guidance when you see:

• <BrowserRouter>, <HashRouter>, or <MemoryRouter>
• <Routes> and <Route> JSX route configuration
• route components passed with element={<Component />}
• no data router, no route module convention, and no loaders/actions

Then read references/declarative-mode.md.

RSC Framework and RSC Data Modes

React Server Components support is unstable and exists in both Framework and Data variants. Use RSC guidance when you see:

• unstable_reactRouterRSC
• @vitejs/plugin-rsc
• unstable_RSCRouteConfig
• RSC entry files such as entry.rsc
• ServerComponent, ServerErrorBoundary, ServerLayout, or ServerHydrateFallback
• React directives or boundary packages such as "use client", "server-only", or "client-only"