All posts

File-based routing, explained

Hasnae6 min read
routingtanstack

The __root.tsx route owns the HTML document and renders an Outlet for its children. Every other file under src/routes maps to a URL by its name.

Dynamic segments

Dynamic segments use a $ prefix: blog/$slug.tsx matches /blog/anything. The matched value arrives as a typed route param, so you never reach for a loosely-typed params bag.

The generated route tree

The route tree is generated for you into routeTree.gen.ts whenever you run the dev server or a build — you never hand-maintain it. Because it is generated, navigation, params, and loader data are all checked at compile time.