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

More React tasks

Back to the full TanStack Router cheat sheet