Route Trees & Nesting

TanStack Router uses a nested route tree to match up the URL with the correct component tree to render.

To build a route tree, TanStack Router supports both:

• File-Based Routing
• Code-Based Routing

Both methods support the exact same core features and functionality, but file-based routing requires less code for the same or better results. For this reasons, file-based routing is the preferred and recommended way to configure TanStack Router and most of the documentation is written from the perspective of file-based routing

For code-based routing documentation, please see the Code-Based Routing guide.

Nested routing is a powerful concept that allows you to use a URL to render a nested component tree. For example, given the URL of /blog/posts/123, you could create a route hierarchy that looks like this:

├── blog
│   ├── posts
│   │   ├── $postId

├── blog
│   ├── posts
│   │   ├── $postId

And render a component tree that looks like this:

<Blog>
  <Posts>
    <Post postId="123" />
  </Posts>
</Blog>

<Blog>
  <Posts>
    <Post postId="123" />
  </Posts>
</Blog>

Let's take that concept and expand it out to a larger site structure, but with file-names now:

/routes
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _layout/
│   ├── layout-a.tsx
├── ├── layout-b.tsx
├── files/
│   ├── $.tsx

/routes
├── __root.tsx
├── index.tsx
├── about.tsx
├── posts/
│   ├── index.tsx
│   ├── $postId.tsx
├── posts.$postId.edit.tsx
├── settings/
│   ├── profile.tsx
│   ├── notifications.tsx
├── _layout/
│   ├── layout-a.tsx
├── ├── layout-b.tsx
├── files/
│   ├── $.tsx

The above is a valid route tree configuration that can be used with TanStack Router! There's a lot of power and convention to unpack with file-based routing, so let's break it down a bit.

Route trees can be configured using a few different ways:

• Flat Routes
• Directories
• Mixed Flat Routes and Directories
• Virtual File Routes
• Code-Based Routes

Please be sure to check out the full documentation links above for each type of route tree, or just proceed to the next section to get started with file-based routing.