Build a route tree from files

After this lesson

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.

src/routes/issues/$issueId.tsxtsx

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

Turn this lesson into a verifiable skill

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.

SOURCE REFERENCES · CHECKED 2026-08-03https://tanstack.com/router/latest/docs/routing/file-based-routing