Configuring Routes

min read

15 viewsLast updated: 11th February, 2026

Route Configuration

React Router v7 supports a flexible routing config via routes.ts.

Defining Routes

Instead of a centralized component, you export a route config:

ts

1// app/routes.ts
2import { type RouteConfig, index, route } from "@react-router/dev/routes";
3
4export default [
5  index("routes/home.tsx"),
6  route("about", "routes/about.tsx"),
7
8  // Nested routes
9  route("dashboard", "routes/dashboard/layout.tsx", [
10    index("routes/dashboard/home.tsx"),
11    route("settings", "routes/dashboard/settings.tsx"),
12  ]),
13] satisfies RouteConfig;

File System Routing

If you prefer, you can stick to file-system conventions, but the config approach gives you explicit control over URLs vs file paths.

Knowledge Check

1

Try creating a nested route for "/profile/settings" in your routes.ts file.

info

Introduction & Setup Loaders: Fetching Data