react-router

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

React Router是模式特定的。在修改应用之前，请先确定模式，加载对应的参考文档，然后阅读已安装包版本的本地文档。

Identify the Mode

确定模式

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

请勿将Framework/Data模式的模式应用到Declarative模式应用中，除非你有意进行模式迁移。

Framework Mode

Framework模式

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

当你看到以下特征时，请遵循Framework模式的指导：

依赖中包含
```
@react-router/dev
```
存在
```
react-router.config.ts
```
文件
存在
```
app/routes.ts
```
文件

存在

app/entry.server.tsx

和/或

app/entry.client.tsx

文件

```
app/routes/
```
目录下的路由模块

路由导出项如

loader

、

action

、

clientLoader

、

clientAction

、

ErrorBoundary

、

meta

、

links

或

headers

从
```
./+types/...
```
导入的内容
来自
```
@react-router/dev/vite
```
的React Router Vite插件

Framework模式的示例通常使用默认的

app/

目录，但在假设路径之前，请检查

react-router.config.ts

中的自定义

appDirectory

配置。

之后请阅读

references/framework-mode.md

。

Data Mode

Data模式

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

当你看到以下特征时，请遵循Data模式的指导：

使用

createBrowserRouter

、

createHashRouter

、

createMemoryRouter

或

createStaticRouter

使用
```
<RouterProvider router={router}>
```

包含

path

、

children

、

loader

、

action

、

Component

、

ErrorBoundary

或

lazy

等属性的路由对象

未使用Framework Vite插件的数据API

之后请阅读

references/data-mode.md

。

Declarative Mode

Declarative模式

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

当你看到以下特征时，请遵循Declarative模式的指导：

使用

<BrowserRouter>

、

<HashRouter>

或

<MemoryRouter>

使用
```
<Routes>
```
和
```
<Route>
```
的JSX路由配置
通过
```
element={<Component />}
```
传递路由组件
无数据路由、无路由模块约定、无加载器/动作

之后请阅读

references/declarative-mode.md

。

RSC Framework and RSC Data Modes

RSC Framework和RSC Data模式

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

React Server Components的支持尚不稳定，且存在Framework和Data两种变体。当你看到以下特征时，请遵循RSC相关指导：

使用
```
unstable_reactRouterRSC
```
使用
```
@vitejs/plugin-rsc
```
使用
```
unstable_RSCRouteConfig
```
存在RSC入口文件如
```
entry.rsc
```

使用

ServerComponent

、

ServerErrorBoundary

、

ServerLayout

或

ServerHydrateFallback

React指令或边界包如
```
"use client"
```
、
```
"server-only"
```
或
```
"client-only"
```

对于RSC Framework模式，请同时阅读

references/framework-mode.md

和

references/rsc.md

。对于RSC Data模式，请同时阅读

references/data-mode.md

和

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

React Router在包中附带了Markdown文档，以便指导内容与已安装版本匹配：

txt

node_modules/react-router/docs/

关键文档路径：

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/

当本技能引用

react-router/docs/...

时，请阅读

node_modules/react-router/docs/

下对应的文件。如果已安装版本不包含本地文档，在React Router仓库内工作时请使用仓库的

docs/

目录；在消费应用中，请回退到版本匹配的官网文档。

大多数文档顶部附近包含模式标记：

txt

[MODES: framework, data, declarative]

仅当文档的模式标记与应用模式匹配时，才应用该文档的指导。如果任务涉及多种模式，请优先选择与当前应用匹配的章节或文件。

RSC相关内容主要记录在：

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

确定模式后，请加载对应的参考文档：

参考文档	使用场景
`references/framework-mode.md`	Framework模式或RSC Framework基础行为
`references/data-mode.md`	Data模式或RSC Data基础行为
`references/declarative-mode.md`	Declarative模式
`references/rsc.md`	任何不稳定的RSC应用

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

如果用户明确要求切换模式，请阅读目标模式的参考文档以及与迁移相关的文档：

迁移方向	需要阅读的文档
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/预渲染变更	`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`
未来特性标识/升级	`react-router/docs/upgrading/future.md` 以及 `react-router/docs/upgrading/` 下的相关文件