SuperAPI AI 工具集

inertia-react

前端与建站

查看项目

更新于 10-16 00:01

技能介绍

用途:该技能面向使用 Inertia.js 与 React 作为前端层的 AdonisJS 项目,处理 React 页面相关的前端模式;后端模式需配合 adonisjs 技能使用。

主要能力:

  • 组件导入:始终从 @adonisjs/inertia/react 导入 Form、Link,以获得路由名支持,而非从 @inertiajs/react 导入。
  • 页面类型:类型在开发服务器运行时由 Transformers 自动生成,无需手动命令;使用 InertiaProps 与 @generated/data(注意不是 ~/generated/data),变体类型用 Data.Post.Variants['forDetailedView']。
  • 共享数据:在 app/middleware/inertia_middleware.ts 的 share() 中定义,使用 ctx.inertia.always() 使数据在部分重载后仍保留;share() 在所有中间件前运行,需用可选链访问 session、auth。
  • Form:method 与 action 由路由名自动推断,不要传 method/action;同一页面多个表单可用 errorBag 隔离错误。
  • Link:支持客户端导航、routeParams、DELETE 方法;查询参数需用 urlFor + href,而非 route 属性。
  • 数据加载:控制器侧可用 inertia.always()、inertia.defer()(可分组)、inertia.optional()、merge();React 侧用 Deferred 组件消费延迟属性。
  • 分页:使用 PostTransformer.paginate() 返回的 data 与 metadata 结构渲染上一页/下一页。
  • 重定向与历史:response.redirect().toRoute()、inertia.location()、inertia.clearHistory()、inertia.encryptHistory()。

使用方式:在涉及 React 页面、表单、共享数据、SSR 等场景时触发本技能,并同时启用 adonisjs 技能。

限制:资料未提供安装命令、版本要求、收费信息或具体平台支持范围;部分内容以代码示例呈现,实际使用需结合项目配置。