react-router-data-mode

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

React Router Data Mode

Data mode uses

createBrowserRouter

and

RouterProvider

to enable data loading, actions, and pending UI without the framework's Vite plugin. This is ideal for existing React applications that want to add data loading and mutation capabilities.

Data Mode 借助

createBrowserRouter

和

RouterProvider

实现数据加载、actions及pending UI功能，无需依赖框架的Vite插件。这非常适合希望添加数据加载和变更能力的现有React应用。

When to Apply

适用场景

Using
```
createBrowserRouter
```
with route objects
Loading data with
```
loader
```
property on routes
Handling mutations with
```
action
```
property

Navigating with

<Link>

<NavLink>

<Form>

redirect

, and

useNavigate

Implementing pending/loading UI states with
```
useNavigation
```
Using
```
useFetcher
```
for mutations without navigation

使用
```
createBrowserRouter
```
搭配路由对象
通过路由的
```
loader
```
属性加载数据
利用
```
action
```
属性处理数据变更

使用

<Link>

、

<NavLink>

、

<Form>

、

redirect

和

useNavigate

进行导航

借助
```
useNavigation
```
实现pending/加载UI状态
使用
```
useFetcher
```
处理无需导航的数据变更

References

参考文档

Load the relevant reference for detailed guidance on the specific API/concept:

Reference	Use When
`references/routing.md`	Configuring routes, nested routes, layout
`references/route-object.md`	Understanding route object properties
`references/data-loading.md`	Loading data with loaders
`references/actions.md`	Handling forms, mutations, validation
`references/navigation.md`	Links, programmatic navigation, redirects
`references/pending-ui.md`	Loading states, optimistic UI
`references/ssr.md`	Server-side rendering with data mode

加载相关参考文档以获取特定API/概念的详细指导：

参考文档	适用场景
`references/routing.md`	配置路由、嵌套路由、布局
`references/route-object.md`	理解路由对象属性
`references/data-loading.md`	使用loaders加载数据
`references/actions.md`	处理表单、数据变更、验证
`references/navigation.md`	链接、编程式导航、重定向
`references/pending-ui.md`	加载状态、乐观UI
`references/ssr.md`	结合Data Mode实现服务端渲染

Critical Patterns

核心模式

These are the most important patterns to follow. Load the relevant reference for full details.

以下是需要遵循的最重要模式。加载相关参考文档以获取完整细节。

Basic Router Setup

基础Router配置

tsx

import { createBrowserRouter, RouterProvider } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      { index: true, Component: Home },
      { path: "about", Component: About },
    ],
  },
]);

ReactDOM.createRoot(root).render(<RouterProvider router={router} />);

tsx

import { createBrowserRouter, RouterProvider } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      { index: true, Component: Home },
      { path: "about", Component: About },
    ],
  },
]);

ReactDOM.createRoot(root).render(<RouterProvider router={router} />);

Forms & Mutations

表单与数据变更

Search forms - use

<Form method="get">

, NOT

onSubmit

with

setSearchParams

tsx

// ✅ Correct
<Form method="get">
  <input name="q" />
</Form>

// ❌ Wrong - don't manually handle search params
<form onSubmit={(e) => { e.preventDefault(); setSearchParams(...) }}>

Inline mutations - use

useFetcher

, NOT

<Form>

(which causes page navigation):

tsx

const fetcher = useFetcher();
const optimistic = fetcher.formData
  ? fetcher.formData.get("favorite") === "true"
  : isFavorite;

<fetcher.Form method="post" action={`/favorites/${id}`}>
  <button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>;

See

references/actions.md

for complete patterns.

搜索表单 - 使用

<Form method="get">

，而非结合

setSearchParams

的

onSubmit

：

tsx

// ✅ 正确
<Form method="get">
  <input name="q" />
</Form>

// ❌ 错误 - 不要手动处理搜索参数
<form onSubmit={(e) => { e.preventDefault(); setSearchParams(...) }}>

内联数据变更 - 使用

useFetcher

，而非会导致页面导航的

<Form>

：

tsx

const fetcher = useFetcher();
const optimistic = fetcher.formData
  ? fetcher.formData.get("favorite") === "true"
  : isFavorite;

<fetcher.Form method="post" action={`/favorites/${id}`}>
  <button>{optimistic ? "★" : "☆"}</button>
</fetcher.Form>;

查看

references/actions.md

获取完整模式。

Optimistic UI Pattern

乐观UI模式

Use

fetcher.formData

to show expected results immediately:

tsx

function FavoriteButton({ itemId, isFavorite }) {
  const fetcher = useFetcher();

  // Optimistic: use pending form data, fallback to server state
  const optimistic = fetcher.formData
    ? fetcher.formData.get("favorite") === "true"
    : isFavorite;

  return (
    <fetcher.Form method="post" action={`/items/${itemId}/favorite`}>
      <input type="hidden" name="favorite" value={String(!optimistic)} />
      <button>{optimistic ? "★" : "☆"}</button>
    </fetcher.Form>
  );
}

See

references/pending-ui.md

for complete patterns.

使用

fetcher.formData

立即展示预期结果：

tsx

function FavoriteButton({ itemId, isFavorite }) {
  const fetcher = useFetcher();

  // 乐观更新：使用待处理的表单数据，回退到服务端状态
  const optimistic = fetcher.formData
    ? fetcher.formData.get("favorite") === "true"
    : isFavorite;

  return (
    <fetcher.Form method="post" action={`/items/${itemId}/favorite`}>
      <input type="hidden" name="favorite" value={String(!optimistic)} />
      <button>{optimistic ? "★" : "☆"}</button>
    </fetcher.Form>
  );
}

查看

references/pending-ui.md

获取完整模式。

react-router-data-mode

Original

Translation

React Router Data Mode

React Router Data Mode

When to Apply

适用场景

References

参考文档

Critical Patterns

核心模式

Basic Router Setup

基础Router配置

Forms & Mutations

表单与数据变更

Optimistic UI Pattern

乐观UI模式

Further Documentation

更多文档