垦荒学园
  • 中文

      • 数据加载

      TanStack Start 的数据加载来自 TanStack Router：路由定义自己的 loader，组件通过 Route API 消费数据。

      loader 基础

      export const Route = createFileRoute('/posts')({
  loader: async () => fetchPosts(),
  component: PostsPage,
})

function PostsPage() {
  const posts = Route.useLoaderData()
  return posts.map((post) => <a key={post.id}>{post.title}</a>)
}

      loader 适合路由级关键数据：首屏必须有、由 URL 参数决定、SSR 需要预加载的数据。

      loader 与 search params

      export const Route = createFileRoute('/posts')({
  validateSearch: (search) => ({ page: Number(search.page ?? 1) }),
  loaderDeps: ({ search }) => ({ page: search.page }),
  loader: ({ deps }) => fetchPosts({ page: deps.page }),
})

      loaderDeps 告诉 Router 哪些 URL 状态会影响 loader 缓存。

      beforeLoad

      beforeLoad 在 loader 前执行，常用于认证、上下文注入或重定向：

      export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context }) => {
    if (!context.user) throw redirect({ to: '/login' })
  },
})

      预取与失效

      TanStack Router 支持 intent preloading：用户 hover 或 focus 链接时提前执行 loader。mutation 后可刷新相关数据：

      const router = useRouter()
await createPost({ data })
await router.invalidate()

      下一步