用途:面向 TanStack Router(路由核心)的数据加载配置,说明如何用路由加载器取数并渲染。
主要能力:loader 返回数据并在组件中通过 Route.useLoaderData 消费,代码分割时用 getRouteApi 替代直接导入 Route;loaderDeps 声明影响缓存键的搜索参数,deps 变化即触发重载;内置基于解析路径与 loaderDeps 的 SWR 缓存,含 staleTime、preloadStaleTime、gcTime 及 defaultStaleTime 全局配置;pendingComponent 配合 pendingMs、pendingMinMs 展示等待态;延迟数据用未 await 的 promise 交给 Await 组件渲染;router.invalidate() 使所有活动加载器重跑并把缓存标记为陈旧,可用 { sync: true } 等待完成;errorComponent 处理加载错误,加载器错误应调 router.invalidate() 重试。
使用方式:在 createFileRoute 的 loader 中取数,可用 params、deps、context、abortController 等参数;通过 createRootRouteWithContext 注入上下文,注意其工厂需双重调用;beforeLoad 在 loader 之前运行。
适用场景:使用 TanStack Router 的前端路由数据预取、搜索参数驱动分页、缓存与等待态控制。
限制与注意:TanStack Router 以客户端优先,加载器默认在浏览器运行,不要在 loader 中放数据库、文件系统等仅服务端代码(除非用 TanStack Start 服务端函数);默认 staleTime 为 0 会在每次重新匹配时后台重载;错误组件中 reset() 不会重跑 loader;beforeLoad 与 loader 中不能调用 React hooks,需经 router 上下文注入;属性声明顺序影响 TypeScript 推断(validateSearch→loaderDeps→beforeLoad→loader);loaderDeps 不要返回整个 search 对象以免无关参数变化触发重载;与 TanStack Query 同用时设 defaultPreloadStaleTime: 0 避免双重缓存;服务端渲染相关细节本资料指向 router-core/ssr 技能,未在本页展开。