Create a file route with a path parameter

CONTRACT

Execution contract

Use when: Use when a file-routed TanStack Router app identifies one resource in the URL path.
Avoid when: Do not use for optional filters; validated search params own that state.
Preconditions: Confirm the route-directory convention, generator plugin, and parameter name; never edit the generated route tree.
Verification: Generate routes, typecheck, and refresh a real parameter URL; a misspelled Link param must fail typecheck.
Failure mode: An undefined param usually means the filename, Route path, and Link param key disagree; inspect the generated tree instead of asserting.
Security: A typed path string is not authorization; re-check identity and resource access at the server data boundary.

Use when

The app uses TanStack Router file-based routing and the URL path identifies one resource.

Minimal implementation

$postId in the file name declares a required parameter. Read it with Route.useParams(), not by splitting window.location.

src/routes/posts/$postId.tsxtsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  component: PostPage,
})

function PostPage() {
  const { postId } = Route.useParams()
  return <h1>Post {postId}</h1>
}

Validate

Run route generation and TypeScript checking. Do not edit routeTree.gen.ts manually.

terminalbash

pnpm generate-routes
pnpm typecheck

PRIMARY SOURCEShttps://tanstack.com/router/latest/docs/routing/file-based-routing