react-router-data-mode

此技能为 AI 代理提供开发 React Router 数据 API 的专家级指导，适用于现有的 React 应用程序。其专为使用“数据模式”的开发者设计，通过 loader、action 与浏览器路由来管理状态、数据变更与导航流程，而无需依赖完整的 React Router 框架插件。通过此技能，代理能够准确执行现代化的路由模式，提升应用效能与用户体验。

该技能涵盖了超越简单声明式路由所需的核心架构，实现了诸如预先加载数据、通过 action 处理表单提交、以及管理待处理 UI 状态等进阶功能。它为希望在仅客户端或混合环境中采用稳健数据导向模式的开发者提供了桥梁。文档强调关注点分离，指导用户采用更简洁的数据模式，而非过时的 useEffect 数据获取或手动状态管理。

• 使用 route 对象 API 设置复杂的路由结构，满足嵌套布局与分段数据需求。

• 实作 loader 以预先加载数据依赖，确保组件挂载前数据已准备就绪。

• 通过 action 管理变更与表单提交，确保应用程序内状态的持续重新验证。

• 利用 useFetcher 执行后台变更、处理内联数据更新，并避免不必要的全页导航。

• 使用 useNavigation 与 useFetcher.formData 开发具备响应性的待处理/加载状态，在异步操作期间提供即时反馈。

• 采用乐观 UI 模式 (Optimistic UI)，通过在服务器响应前更新界面，使应用程序操作感觉更即时。

• 优先使用 Form 组件与 useFetcher，而非手动处理 onSubmit 事件，以发挥浏览器与函数库的自动化优势。

• 始终使用对象格式设定路由，而非 JSX 组件，以维持对数据 API 的兼容性。

• 利用参考表格，将复杂需求（如 URL 参数处理或服务器端渲染）快速对应至特定实作模块。

• 请记住 action 会自动触发所有启用 loader 的全局重新验证，简化跨 UI 的状态同步。

• 确保表单方法 (method) 明确定义（如 method="post" 或 method="get"），以便 React Router 正确处理数据传输与导航生命周期。