垦荒学园
  • 中文

      • 文件路由

      TanStack Start 继承 TanStack Router 的文件路由。文件名生成路由树，路由对象提供类型入口。

      基本约定

      文件路由
      routes/index.tsx/
      routes/about.tsx/about
      routes/posts.$postId.tsx/posts/:postId
      routes/dashboard.index.tsx/dashboard
      routes/dashboard.settings.tsx/dashboard/settings

      具体约定可能随版本演进，以官方模板为准。

      根路由

      import { createRootRoute, Outlet } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => (
    <html>
      <head />
      <body>
        <Outlet />
      </body>
    </html>
  ),
})

      根路由通常负责 HTML shell、全局样式、错误边界和 Devtools。

      动态参数

      export const Route = createFileRoute('/posts/$postId')({
  loader: ({ params }) => fetchPost(params.postId),
  component: PostPage,
})

function PostPage() {
  const { postId } = Route.useParams()
  const post = Route.useLoaderData()
  return <article>{post.title}</article>
}

      postId 类型来自路由路径。

      搜索参数

      export const Route = createFileRoute('/products')({
  validateSearch: (search: Record<string, unknown>) => ({
    page: Number(search.page ?? 1),
    q: String(search.q ?? ''),
  }),
})

      过滤、分页、tab 状态适合放入 URL，而不是散落在组件 state 中。

      下一步