# Split routes config in React Router

Used: react-router@7.0.0

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`.

```ts {% path="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`.

```txt
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.

```ts {% path="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;
```