SuperAPI AI 工具集

tanstack-start

前端与建站

查看项目

更新于 10-15 23:57

技能介绍

用途:当 TanStack Start 应用需要由 json-render 规格描述完整页面或路由时使用该集成。安装:npm install @json-render/core @json-render/react @json-render/tanstack-start。

主要能力:通过 defineCatalog 与 startComponentDefinitions 定义生成目录,用 StartAppSpec 声明 metadata、layouts 和 routes。路由支持 /posts/$slug 命名参数与 /docs/$ 形式的 splat;splat loader 参数为 _splat 下以斜杠分隔的字符串,生成 RFC 6902 补丁时路由键中的斜杠需转义为 ~1。每个布局必须包含 Slot 元素,Slot 与 Link 由 startComponentDefinitions 声明,无需消费者注册 React 实现。

服务端:用 createStartApp 传入 spec 与 loaders,得到 getPageData、getHead、getStaticPaths。状态合并优先级为应用状态、布局状态、页面状态、loader 数据。getHead 将应用与路由元数据合并为 TanStack meta 与 links 描述符;getStaticPaths 包含静态路由及带 staticParams 的动态路由,其字符串需转换为 { path } 对象供 TanStack Start 顶层 pages 插件选项使用。loader 参数经 URL 解码,staticParams 值在生成路径中经 URL 编码。路由匹配将尾斜杠视为可选,并接受编码或解码的 pathname。

路由接线:用 createFileRoute 定义路由,loader 调用 getPageData,head 调用 getHead,组件使用 PageRenderer,并配合 StartLoading、StartErrorBoundary、StartNotFound。TanStack Router loader 在服务端与客户端均运行;若规格工厂或命名 loader 使用凭据、数据库客户端或仅服务端导入,需用 createServerFn 包裹 getPageData 与 getHead,不要将服务端代码直接导入同构路由 loader。

根提供者:用 StartAppProvider 包裹根路由 Outlet,并渲染 HeadContent 使元数据进入文档。StartAppProvider 接收 spec 后,各组件选择匹配路由的对应 fallback,显式 fallback 属性可覆盖该查找;命名 $computed 实现通过 StartAppProvider.functions 传入。默认错误边界在用户选择 Try again 时使路由器失效并重跑失败的 loader。React 组件从 @json-render/tanstack-start 导入,schema、createStartApp、matchRoute、resolveMetadata 与静态路径辅助函数从 @json-render/tanstack-start/server 导入。

限制:资料未提供收费、平台支持范围或性能数据。