Kenhuang Academy
  • English

      • File-Based Routing

      TanStack Start inherits TanStack Router's file-based routing. Files generate the route tree and route objects provide typed entry points.

      Basic Conventions

      FileRoute
      routes/index.tsx/
      routes/about.tsx/about
      routes/posts.$postId.tsx/posts/:postId
      routes/dashboard.index.tsx/dashboard
      routes/dashboard.settings.tsx/dashboard/settings

      Root Route

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

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

      Dynamic Params

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

      Search Params

      Search params are first-class URL state: parsed, validated, inherited, and typed.

      Next Steps