用途:介绍 TanStack Router 中路由级数据加载机制,围绕 loader 选项组织数据获取、缓存与加载状态。
主要能力:loader 返回数据并通过 useLoaderData 消费,代码分割组件用 getRouteApi;loaderDeps 声明影响缓存键的 search 参数;内置 SWR 缓存以解析后的 pathname 加 loaderDeps 为键,默认 staleTime 为 0、preloadStaleTime 为 30 秒、gcTime 为 30 分钟,可路由级或全局 defaultStaleTime 配置;pendingComponent/pendingMs/pendingMinMs 控制加载态,默认 1 秒后显示、至少停留 500ms;createRootRouteWithContext 注入路由上下文,beforeLoad 可提供路由级上下文;loader 返回未 await 的 Promise 配合 Await 组件实现延迟加载;router.invalidate() 在变更后重跑 loader,sync: true 可等待完成;errorComponent 处理错误。
使用方式:在 createFileRoute 中声明 loader、loaderDeps、staleTime、pendingComponent 等;loader 接收 params、deps、context、abortController、cause、preload、location 等参数。
限制与注意:loader 默认在客户端运行,不要放数据库查询、文件系统或仅服务端代码,除非使用 TanStack Start 服务端函数;beforeLoad 与 loader 中不能调用 React hooks,需通过路由上下文注入;属性顺序影响 TypeScript 推断,建议 validateSearch、loaderDeps、beforeLoad、loader 顺序;loaderDeps 不要返回整个 search 对象;错误组件中应使用 router.invalidate() 而非 reset() 重跑 loader;createRootRouteWithContext 需双重调用。与 TanStack Query 同用时设 defaultPreloadStaleTime: 0 避免双重缓存。