Flat Routes (Dot Notation) in React

From the TanStack Router cheat sheet · File-Based Routing · verified Jul 2026

Flat Routes (Dot Notation)

Use dots to represent route hierarchy

typescript

// File structure
routes/
  __root.tsx
  index.tsx                 # /
  about.tsx                 # /about
  posts.index.tsx           # /posts
  posts.$postId.tsx         # /posts/:postId
  posts.$postId.edit.tsx    # /posts/:postId/edit
  settings.profile.tsx      # /settings/profile
  settings.account.tsx      # /settings/account

💡 Dots (.) represent nesting levels

⚡ Best for deeply nested routes

🔍 No folder nesting required

🎯 Dollar sign ($) for dynamic params

flat-routesfile-basedstructure

More React tasks

Directory Routes
Special Route Files

Back to the full TanStack Router cheat sheet