react-router-data-mode

React Router 数据模式

数据模式使用 createBrowserRouter 和 RouterProvider，无需框架的 Vite 插件即可启用数据加载、操作和待处理 UI。对于希望添加数据加载和变更功能的现有 React 应用来说，这是理想选择。

适用场景

• 使用 createBrowserRouter 和路由对象
• 使用路由上的 loader 属性加载数据
• 使用 action 属性处理变更
• 使用 <Link>、<NavLink>、<Form>、redirect 和 useNavigate 进行导航
• 使用 useNavigation 实现待处理／加载 UI 状态
• 使用 useFetcher 在不导航的情况下执行变更

参考资料

加载相关参考资料，了解特定 API／概念的详细指南：

参考资料	适用场景
references/routing.md	配置路由、嵌套路由和布局
references/route-object.md	了解路由对象属性
references/data-loading.md	使用加载器加载数据
references/actions.md	处理表单、变更和验证
references/navigation.md	链接、编程式导航和重定向
references/pending-ui.md	加载状态、乐观 UI
references/ssr.md	使用数据模式进行服务端渲染

关键模式

以下是最重要的模式。加载相关参考资料以了解完整详情。

基本路由器设置

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} />);

表单与变更

搜索表单 - 使用 <Form method="get">，不要使用带有 setSearchParams 的 onSubmit：

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

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

内联变更 - 使用 useFetcher，不要使用 <Form>（它会触发页面导航）：

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。

乐观 UI 模式

使用 fetcher.formData 立即显示预期结果：

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>
  );
}

完整模式请参阅 references/pending-ui.md。

更多文档

如果这些参考资料未涵盖任何与 React Router 相关的内容，可以搜索官方文档：

https://reactrouter.com/docs