---
id: router.file-route
kind: recipe
product: router
framework: react
locale: en
revision: 2
sourceCheckedOn: "2026-08-03"
versionRange: "^1"
verifiedAgainst: "@tanstack/react-router@1.170.18"
contentModel: 2
packages:
  - "@tanstack/react-router"
tasks:
  - "create-route"
  - "read-path-param"
  - "file-based-routing"
sourceRefs:
  - "https://tanstack.com/router/latest/docs/routing/file-based-routing"
---

# Create a file route with a path parameter

> Create /posts/$postId in a React app and read the typed postId from the route instance.

## 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.

File: `src/routes/posts/$postId.tsx`

```tsx
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.

File: `terminal`

```bash
pnpm generate-routes
pnpm typecheck
```

## Official sources

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