Directory Routes in React

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

Directory Routes

Use folders to represent route hierarchy

typescript
// File structure
routes/
  __root.tsx
  index.tsx              # /
  about.tsx              # /about
  posts/
    index.tsx            # /posts
    $postId.tsx          # /posts/:postId
    $postId/
      index.tsx          # /posts/:postId
      edit.tsx           # /posts/:postId/edit
💡 Folders represent URL segments
⚡ Good for organizing related routes
🔍 index.tsx renders at folder path
🎯 Can mix with flat routes
directory-routesfile-basedfolders

More React tasks

Back to the full TanStack Router cheat sheet