Route Configuration in React
From the React Router v7 cheat sheet · Routing Basics · verified Jul 2026
Route Configuration
Defining routes and nested routes
typescript
// Library Mode: Object-based routes
const router = createBrowserRouter([
{
path: "/",
element: <Root />,
loader: rootLoader,
action: rootAction,
errorElement: <ErrorBoundary />,
children: [
{
index: true, // Default child route
element: <Index />,
},
{
path: "teams",
element: <Teams />,
loader: teamsLoader,
children: [
{
path: ":teamId",
element: <Team />,
loader: teamLoader,
}
]
},
{
path: "*",
element: <NotFound />
}
]
}
])
// Framework Mode: File-based routing
// app/routes/_index.tsx → /
// app/routes/about.tsx → /about
// app/routes/blog.$id.tsx → /blog/:id
// app/routes/$.tsx → catch-all💡 Framework Mode uses file-based routing with naming conventions
⚡ Lazy loading routes reduces initial bundle size
📌 Loaders run in parallel for nested routes
🟢 Use index routes for default child components
routingconfigurationnested