routes.ts

Framework

Summary

Reference Documentation ↗

Configuration file that maps URL patterns to route modules in your application.

See the routing guide for more information.

Examples

Basic

Configure your routes as an array of objects.

import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";

export default [
  route("some/path", "./some/file.tsx"),
  // pattern ^           ^ module file
] satisfies RouteConfig;

You can use the following helpers to create route config entries:

• route — Helper function for creating a route config entry
• index — Helper function for creating a route config entry for an index route
• layout — Helper function for creating a route config entry for a layout route
• prefix — Helper function for adding a path prefix to a set of routes without needing to introduce a parent route
• relative — Creates a set of route config helpers that resolve file paths relative to the given directory. Designed to support splitting route config into multiple files within different directories

File-based Routing

If you prefer to define your routes via file naming conventions rather than configuration, the @react-router/fs-routes package provides a file system routing convention:

import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";

export default flatRoutes() satisfies RouteConfig;

Route Helpers