Root Route in React

From the TanStack Router cheat sheet · Setup & Installation · verified Jul 2026

Root Route

Define the root layout route

typescript
// src/routes/__root.tsx
import { createRootRoute, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'

export const Route = createRootRoute({
  component: RootComponent,
})

function RootComponent() {
  return (
    <>
      <div className="app">
        <nav>{/* Navigation */}</nav>
        <Outlet />
      </div>
      <TanStackRouterDevtools />
    </>
  )
}
💡 __root.tsx must be in routes folder
⚡ <Outlet /> renders matched child routes
🔍 Wrap entire app with root layout
🎯 notFoundComponent handles 404 errors
rootlayoutoutlet

Continue with TanStack Router

Save the full cheat sheet or work through every related task.

More React tasks

Back to the full TanStack Router cheat sheet