TanStack Router: Different route types

Basic route

Example: src/routes/about.tsx:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/about')({
  component: RouteComponent,
})

function RouteComponent() {
  return <div>Hello "/about"!</div>
}

Index route

Example: src/routes/posts.index.tsx

import { createFileRoute } from '@tanstack/react-router'

// Note the trailing slash, which is used to target index routes
export const Route = createFileRoute('/posts/')({
  component: PostsIndexComponent,
})

function PostsIndexComponent() {
  return <div>Please select a post!</div>
}

Routes with dynamic segments

Example: src/routes/posts/$postId.tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/$postId')({
  // You can use the postId param in a loader
  loader: ({ params }) => fetchPost(params.postId),
  component: PostComponent,
})

function PostComponent() {
  // You can use the postId param in a component (type-safe)
  const { postId } = Route.useParams()
  return <div>Post ID: {postId}</div>
}

Routes with optional dynamic segments

Example: src/routes/posts.{-$category}.tsx

// The `-$category` segment is optional, so this route matches both `/posts` and `/posts/tech`
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts/{-$category}')({
  component: PostsComponent,
})

function PostsComponent() {
  const { category } = Route.useParams()

  return <div>{category ? `Posts in ${category}` : 'All Posts'}</div>
}

This route will match both /posts (category will be undefined) and /posts/tech (category will be "tech").

Layout routes

Suppose you had the following route files:

routes/
├── app.tsx
├── app.dashboard.tsx
├── app.settings.tsx

You can define src/routes/app.tsx as a layout route like so:

import { Outlet, createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/app')({
  component: AppLayoutComponent,
})

function AppLayoutComponent() {
  return (
    <div>
      <h1>App Layout</h1>
      <Outlet />
    </div>
  )
}

You can also use a nested directory structure like so:

routes/
├── app/users/
│   ├── $userId/
|   |   ├── route.tsx
|   |   ├── index.tsx
|   |   ├── edit.tsx

Pathless layout routes

If you want a layout route but without requiring a common path segment like /app/, you can use a pathless layout route by defining a route tree like this:

routes/
├── _pathlessLayout.tsx
├── _pathlessLayout.a.tsx
├── _pathlessLayout.b.tsx

Your pathless layout route code can look similar to a normal layout route:

import { Outlet, createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/_pathlessLayout')({
  component: PathlessLayoutComponent,
})

function PathlessLayoutComponent() {
  return (
    <div>
      <h1>Pathless layout</h1>
      <Outlet />
    </div>
  )
}

As with normal layout routes, you can also use a nested directory structure to organise your routes:

routes/
├── _pathlessLayout/
│   ├── route.tsx
│   ├── a.tsx
│   ├── b.tsx