# React 路由器数据模式数据模式使用 createBrowserRouter 和 RouterProvider 来启用数据加载、操作和挂起的 UI，而无需框架的 Vite 插件。这对于想要添加数据加载和突变功能的现有 React 应用程序来说是理想的选择。 ## 何时申请 * 将 `createBrowserRouter` 与路由对象一起使用 * 使用路线上的“loader”属性加载数据 * 使用“action”属性处理突变 * 使用 ``、``、`

`、`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 `参考文献/ssr.md` |数据模式的服务器端渲染 ## 关键模式这些是需要遵循的最重要的模式。加载相关参考以获取完整详细信息。 ### 基本路由器设置从“react-router”导入{createBrowserRouter，RouterProvider}； const 路由器 = createBrowserRouter([ { 路径：“/”，成分：根，孩子们：[ {索引：true，组件：首页}， { 路径：“关于”，组件：关于 }， ], }, ]); ReactDOM.createRoot(root).render(); ### 形式和突变 **搜索表单** \- 使用 ``，而不是 `onSubmit` 和 `setSearchParams`： // ✅ 正确 <表单方法=“获取”> <输入名称=“q”/> // ❌ 错误 - 不要手动处理搜索参数 { e.preventDefault(); setSearchParams(...) }}> **内联突变** \- 使用 `useFetcher`，而不是 `` （这会导致页面导航）： const fetcher = useFetcher(); 常量乐观 = fetcher.formData ？ fetcher.formData.get("最喜欢的") === "true" : 是最喜欢的； <按钮>{乐观？ “★”：“☆”} ; 有关完整模式，请参阅“references/actions.md”。 ### 乐观的 UI 模式使用 fetcher.formData 立即显示预期结果：函数FavoriteButton({ itemId, isFavorite }) { const fetcher = useFetcher(); // 乐观：使用挂起的表单数据，回退到服务器状态常量乐观 = fetcher.formData ？ fetcher.formData.get("最喜欢的") === "true" : 是最喜欢的；返回（ <按钮>{乐观？ “★”：“☆”} ）； } 有关完整模式，请参阅“references/pending-ui.md”。 ## 更多文档如果这些参考资料中没有涉及React Router相关的内容，您可以搜索官方文档：

React 路由器数据模式

包含技能