SuperAPI AI 工具集

inertia

前端与建站

查看项目

更新于 10-16 05:46

技能介绍

用途:在 AdonisJS 项目中用 Inertia 连接后端路由与 React 19 页面,统一页面渲染、共享数据、表单、模态框与导航的写法。

主要能力:控制器调用 inertia.render('<name>', { props }) 渲染页面,客户端把名称解析为模块 ui/pages/ 下的 .tsx 文件;共享属性通过 Inertia 中间件的 ctx.inertia.always(...) 全局下发,前端用 usePageProps<T>() 类型化读取;表单默认用 @inertiajs/react 的 useForm 配合原生 form onSubmit,调用 post(urlFor('route.name'), { onSuccess, onFinish, preserveScroll });URL 一律用 Tuyau 的 urlFor('route.name', { param: value }),不硬编码;模态框由控制器 helper 返回,可指定背景路由;导航用 router.visit、router.reload({ only: [...], async: true }) 做局部刷新。

使用方式:页面放在 app/<mod>/ui/pages/<subpath>/<page>.tsx,控制器按去掉 .tsx 及模块前缀的路径引用;每个页面显式导入布局 shell;根客户端入口挂载主题、i18n、tooltip、Tuyau、模态栈等 provider,主题与 i18n 需在最外层;服务端生成的数据类型来自 ace codegen,页面中从 codegen 路径导入类型而非重复定义。

适用场景:需要类型安全路由、模块化页面组织、共享属性与模态框统一管理的 AdonisJS + React 全栈项目。

限制与注意:props 必须可 JSON 序列化,Lucid 模型需经 Transformer 转换;页面专属数据放控制器而非中间件 share();内部导航用 Link 或 router.visit,不用 a href;同页提交表单需 preserveScroll: true;页面级 provider 不应加在页面层。相关文档见 AdonisJS Inertia、Inertia.js React、useForm 与 Tuyau 官方链接。