---
id: file-routes
track: learn
product: router
locale: en
order: 3
revision: 2
sourceCheckedOn: "2026-08-03"
versionRange: "Router ^1"
verifiedAgainst: "@tanstack/react-router@1.170.18 + @tanstack/router-cli@1.167.21"
contentModel: 2
prerequisites:
  - "A running Start project"
sourceRefs:
  - "https://tanstack.com/router/latest/docs/routing/file-based-routing"
---

# Build a route tree from files

> Create issue list and detail pages, then connect file names, path params, and inferred types.

**Outcome:** Create /issues/$issueId and read the parameter with inferred types.

## The file name is route design

In file-based routing, $issueId becomes a required path parameter. The generated route tree checks the createFileRoute path, so it is more than an arbitrary string.

File: `src/routes/issues/$issueId.tsx`

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

export const Route = createFileRoute('/issues/$issueId')({
  component: IssuePage,
})

function IssuePage() {
  const { issueId } = Route.useParams()
  return <h1>Issue #{issueId}</h1>
}
```

## Links participate in type checking

When a Link target contains $issueId, params become required. Missing params fail during development instead of after a user clicks the link.

## Practice and verification

### Completion checkpoint

The list links to `/issues/$issueId`, and the detail route receives a typed parameter through its Route API.

### Exercise

Add an `/issues/$issueId/edit` child route and reuse the parent issueId to build a Link back to the detail page.

### Verification

TypeScript should reject a wrong Link parameter name; the correct issueId should render the matching detail.

### Common pitfalls

- Manually splitting path parameters from `window.location`.
- Treating a path parameter as a number without explicit boundary conversion.

## Official sources

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