fix(remix-dev): allow defining multiple routes for the same route module file

contributors.yml

@@ -236,6 +236,7 @@
 - lpsinger
 - lswest
 - lucasdibz
+- lucasferreira
 - luispagarcia
 - luistak
 - luistorres

packages/remix-dev/__tests__/defineRoutes-test.ts

@@ -87,4 +87,14 @@ describe("defineRoutes", () => {
       }
     `);
   });
+
+  it("allows multiple routes with the same route module", () => {
+    let routes = defineRoutes((route) => {
+      route("/user/:id", "routes/index.tsx", { id: "user-by-id" });
+      route("/user", "routes/index.tsx", { id: "user" });
+      route("/other", "routes/other-route.tsx");
+    });
+
+    expect(Object.entries(routes)).toHaveLength(3);
+  });
 });

packages/remix-dev/compiler/assets.ts

@@ -56,10 +56,13 @@ export async function createAssetsManifest(
     config.appDirectory,
     config.entryClientFile
   );
-  let routesByFile: Map<string, Route> = Object.keys(config.routes).reduce(
+  let routesByFile: Map<string, Route[]> = Object.keys(config.routes).reduce(
     (map, key) => {
       let route = config.routes[key];
-      map.set(route.file, route);
+      map.set(
+        route.file,
+        map.has(route.file) ? [...map.get(route.file), route] : [route]
+      );
       return map;
     },
     new Map()
@@ -85,22 +88,27 @@ export async function createAssetsManifest(
         /(^browser-route-module:|\?browser$)/g,
         ""
       );
-      let route = routesByFile.get(entryPointFile);
-      invariant(route, `Cannot get route for entry point ${output.entryPoint}`);
-      let sourceExports = await getRouteModuleExportsCached(config, route.id);
-      routes[route.id] = {
-        id: route.id,
-        parentId: route.parentId,
-        path: route.path,
-        index: route.index,
-        caseSensitive: route.caseSensitive,
-        module: resolveUrl(key),
-        imports: resolveImports(output.imports),
-        hasAction: sourceExports.includes("action"),
-        hasLoader: sourceExports.includes("loader"),
-        hasCatchBoundary: sourceExports.includes("CatchBoundary"),
-        hasErrorBoundary: sourceExports.includes("ErrorBoundary"),
-      };
+      let groupedRoute = routesByFile.get(entryPointFile);
+      invariant(
+        groupedRoute,
+        `Cannot get route(s) for entry point ${output.entryPoint}`
+      );
+      for (let route of groupedRoute) {
+        let sourceExports = await getRouteModuleExportsCached(config, route.id);
+        routes[route.id] = {
+          id: route.id,
+          parentId: route.parentId,
+          path: route.path,
+          index: route.index,
+          caseSensitive: route.caseSensitive,
+          module: resolveUrl(key),
+          imports: resolveImports(output.imports),
+          hasAction: sourceExports.includes("action"),
+          hasLoader: sourceExports.includes("loader"),
+          hasCatchBoundary: sourceExports.includes("CatchBoundary"),
+          hasErrorBoundary: sourceExports.includes("ErrorBoundary"),
+        };
+      }
     }
   }
 

packages/remix-dev/config/routes.ts

@@ -54,6 +54,13 @@ export interface DefineRouteOptions {
    * Should be `true` if this is an index route that does not allow child routes.
    */
   index?: boolean;
+
+  /**
+   * An optional unique id string for this route, that will be appended to the file
+   * name e.g: `<file-name>--<id>`. Use this if you need to aggregate two or more
+   * routes with the same route file.
+   */
+  id?: string;
 }
 
 interface DefineRouteChildren {
@@ -137,11 +144,13 @@ export function defineRoutes(
       options = optionsOrChildren || {};
     }
 
+    let fileId = createRouteId(file);
+
     let route: ConfigRoute = {
       path: path ? path : undefined,
       index: options.index ? true : undefined,
       caseSensitive: options.caseSensitive ? true : undefined,
-      id: createRouteId(file),
+      id: options.id ? `${fileId}--${options.id}` : fileId,
       parentId:
         parentRoutes.length > 0
           ? parentRoutes[parentRoutes.length - 1].id