# Reuse route modules in React Router

Used: react-router@7.0.0

Sometimes you may need to use the same route module in multiple paths, imagine you're building a modal route, you need this modal route to be on `/modal` but also on `/profile/modal` and `/settings/modal`.

Instead of reexporting the code from multiple files, you can reuse the file in the `routes.ts`.

```ts {% path="app/routes.ts" %}
import { type RouteConfig, route } from "@react-router/dev/routes";

export default [
  route("modal", "views/modal.tsx"),
  route("profile", "views/profile.tsx", [route("modal", "views/modal.tsx")]),
  route("settings", "views/settings.tsx", [route("modal", "views/modal.tsx")]),
] satisfies RouteConfig;
```

If we tried to do that it will crash because of the duplicated route id, note that the error happens because of the route id, not the route itself.

The route id by default is generated based on the file path without the file extension, so in the case of the modal it will be `views/modal`, and it will be the same for every time you use the file.

But luckily for use we can customize it.

```ts {% path="app/routes.ts" %}
import { type RouteConfig, route } from "@react-router/dev/routes";

export default [
  route("modal", "views/modal.tsx", { id: "modal" }),
  route("profile", "views/profile.tsx", [
    route("modal", "views/modal.tsx", { id: "profile-modal" }),
  ]),
  route("settings", "views/settings.tsx", [
    route("modal", "views/modal.tsx", { id: "settings-modal" }),
  ]),
] satisfies RouteConfig;
```

With this `id` option we can now reuse the route file in multiple paths.