Step-by-Step Guide to Splitting Route Configurations in React Router

Background

When your react application grows in complexity, the main route configuration file (routes.ts) can grow large and become difficult to manage. Therefore, splitting the route configuration in multiple files organized by feature or module can make the code clearer and easier to maintain.

Implementation

React Router 7 provides a utility package (@react-router/dev/routes), which helps you manage and organize route splitting easily. The article primarily covers two key points:

1. How to define child route within a module?

1. how to merge routes from different modules into a main route configuration?

Step 1: splitting the route configuration

Suppose your application has three modules:

• Admin

• App

• Marketing

For each module, create a dedicated routes.ts file to define its specific routes.

Ror example, define Admin module routes in app/admin/routes.ts.

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

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

// Define routes for the Admin module
export default [
  index("dashboard.tsx"), // The root route for the admin module, pointing to dashboard.tsx
  route("users", "users/index.tsx"), // /users route，pointing to users/index.tsx
] satisfies RouteConfig;

• relative function: simplifies defining paths relative to the current routes.ts file directory. For instance:

  • index(dashboard.tsx) points to the dashboard.tsx file

• route(users,users/index.tsx) defines a /users route, pointing to users/index.tsx file.

step 2: Merging All Module Routes in Root Route File

In the root route file (app/routes.ts), import the routes from different modules and combine them into a single configuration. To simplify management, React Router provides a prefix method that allows you to add a common prefix to all routes in a module.

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

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

// Combine routes from all modules into a single array
export default [
  ...prefix("admin", admin), // Add "/admin" as a prefix to all routes in the Admin module
  ...prefix("app", app),     // Add "/app" as a prefix to all routes in the App module
  ...marketing,              // No prefix added for the Marketing module
] satisfies RouteConfig;

• prefix function: Automatically adds prefix to all routes in a module. For instance:

  • If the Admin module defines /dashboard and /users, applying prefix(“admin“,admin) changes the actual routes to /admin/dashboard and/admin/users .

• … spread operator: Combines the routes from multiple modules into a single route configuration.

File structure

The final file structure might look like this:

app/
├── routes.ts           // Root route file that combines all module routes
├── admin/
│   ├── routes.ts       // Route definitions for the Admin moduel
├── app/
│   ├── routes.ts       // Route definitions for the App moduel
├── marketing/
│   ├── routes.ts       // Route definitions for the Marketing moduel