How toSplit routes config in React Router

When your application grows, your routes.ts file can become large and difficult to manage. You can split your routes.ts file into multiple files to make it easier to manage your routes. This is especially useful for large applications with many routes.

To do it you can use the relative function from @react-router/dev/routes.

app/admin/routes.ts
import { type RouteConfig, relative } from "@react-router/dev/routes";

const { route, index } = relative(import.meta.dirname);

export default [
  index("dashboard.tsx"),
  route("users", "users/index.tsx"),
] satisfies RouteConfig;

Define all the routes relative to your new routes.ts file. You can do this to split your file in as much files as you needs, and the files doesn't need to be named routes.ts.

app/
├── routes.ts
├── admin/
│   ├── routes.ts <- definition for admin routes
├── app/
│   ├── routes.ts <- definition for app routes
├── marketing/
│   ├── routes.ts <- definition for landing routes

Then in the base app/routes.ts file, import the routes from the new file.

app/routes.ts
import { type RouteConfig, prefx } from "@react-router/dev/routes";

import admin from "./app/admin/routes";
import app from "./app/app/routes";
import marketing from "./app/marketing/routes";

export default [
  ...prefix("admin", admin), // You can prefix all routes at once
  ...prefix("app", app),
  ...marketing,
] satisfies RouteConfig;