react-router

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"

For RSC Framework, read both references/framework-mode.md and references/rsc.md. For RSC Data, read both references/data-mode.md and references/rsc.md.

Use Installed Docs as Source of Truth

React Router ships markdown docs in the package so guidance can match the installed version:

node_modules/react-router/docs/

Key docs paths:

node_modules/react-router/docs/index.md
node_modules/react-router/docs/start/
node_modules/react-router/docs/how-to/
node_modules/react-router/docs/explanation/
node_modules/react-router/docs/upgrading/

When this skill references react-router/docs/..., read the matching file under node_modules/react-router/docs/. If the installed version does not include local docs, use the repo docs/ directory when working inside the React Router repository; in a consuming app, fall back to version-matched website docs.

Most docs include a mode marker near the top:

[MODES: framework, data, declarative]

Only apply a doc when its mode marker matches the app mode. If a task spans modes, prefer the section or file that matches the current app.

RSC is documented primarily in:

node_modules/react-router/docs/how-to/react-server-components.md

Skill References

Load the relevant reference after identifying the mode:

Reference	Use When
references/framework-mode.md	Framework Mode or RSC Framework base behavior
references/data-mode.md	Data Mode or RSC Data base behavior
references/declarative-mode.md	Declarative Mode
references/rsc.md	Any unstable RSC app

Mode Migration Doc Index

If the user explicitly asks to switch modes, read the target mode reference plus the migration-relevant docs:

Migration	Docs to read
Declarative → Data	react-router/docs/start/modes.md, react-router/docs/start/data/routing.md, react-router/docs/start/data/data-loading.md, react-router/docs/start/data/actions.md
Declarative/Data → Framework	react-router/docs/start/modes.md, react-router/docs/start/framework/routing.md, react-router/docs/start/framework/route-module.md, react-router/docs/how-to/route-module-type-safety.md
Framework SPA/SSR/pre-render changes	react-router/docs/start/framework/rendering.md, react-router/docs/how-to/spa.md, react-router/docs/how-to/pre-rendering.md, react-router/docs/start/framework/data-loading.md, react-router/docs/start/framework/actions.md
Future flags/upgrades	react-router/docs/upgrading/future.md and relevant files under react-router/docs/upgrading/