react-router

Original：🇺🇸 English

Translated

Build applications with React Router in Framework, Data, Declarative, and unstable RSC modes. Use when configuring routes, route modules, loaders, actions, forms, fetchers, navigation, pending UI, SSR/SPA/pre-rendering, middleware, URL params/search params, or React Router upgrades.

4installs

Sourceremix-run/react-router

Added on2026-08-12

NPX Install

npx skill4agent add remix-run/react-router react-router

SKILL.md Content

View Translation Comparison →

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:

txt

node_modules/react-router/docs/

Key docs paths:

txt

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:

txt

[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:

txt

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/`

react-router

NPX Install

Tags

SKILL.md Content

React Router

Identify the Mode

Framework Mode

Data Mode

Declarative Mode

RSC Framework and RSC Data Modes

Use Installed Docs as Source of Truth

Skill References

Mode Migration Doc Index