fix: generate relative route IDs when using relative() helper

Author: younghoonkim

packages/react-router-dev/__tests__/relative-test.ts

@@ -0,0 +1,146 @@
+import { relative, route, configRoutesToRouteManifest } from "../config/routes";
+
+describe("relative() route ID generation - Fix #12325", () => {
+  describe("Verify updated behavior", () => {
+    it("When using relative(), route IDs are generated based on relative paths", () => {
+      const { route, layout, index } = relative("app/routes");
+
+      const routes = [
+        layout("_layout.tsx", [
+          route("home", "home.tsx"),
+          route("about", "about.tsx"),
+          index("_index.tsx"),
+        ]),
+      ];
+
+      const appDirectory = process.cwd();
+      const manifest = configRoutesToRouteManifest(appDirectory, routes);
+
+      const layoutRoute = Object.values(manifest).find((r) =>
+        r.file.includes("_layout"),
+      );
+      const homeRoute = Object.values(manifest).find((r) =>
+        r.file.includes("home"),
+      );
+      const indexRoute = Object.values(manifest).find((r) =>
+        r.file.includes("_index"),
+      );
+
+      console.log("Layout ID:", layoutRoute?.id);
+      console.log("Home ID:", homeRoute?.id);
+      console.log("Index ID:", indexRoute?.id);
+
+      expect(layoutRoute?.id).toBe("app/routes/_layout");
+      expect(homeRoute?.id).toBe("app/routes/home");
+      expect(indexRoute?.id).toBe("app/routes/_index");
+
+      expect(layoutRoute?.id).not.toContain(process.cwd());
+      expect(homeRoute?.id).not.toContain(process.cwd());
+      expect(indexRoute?.id).not.toContain(process.cwd());
+    });
+
+    it("Even when using normal route(), relative path IDs are still generated", () => {
+      const routes = [route("home", "app/routes/home.tsx")];
+
+      const appDirectory = process.cwd();
+      const manifest = configRoutesToRouteManifest(appDirectory, routes);
+
+      const homeRoute = Object.values(manifest)[0];
+
+      console.log("Normal route ID:", homeRoute.id);
+
+      expect(homeRoute.id).toBe("app/routes/home");
+      expect(homeRoute.id).not.toContain(process.cwd());
+    });
+
+    it("If an ID is explicitly specified, it is preserved as is", () => {
+      const { route } = relative("app/routes");
+
+      const routes = [route("home", "home.tsx", { id: "custom-home-id" })];
+
+      const appDirectory = process.cwd();
+      const manifest = configRoutesToRouteManifest(appDirectory, routes);
+      const homeRoute = Object.values(manifest)[0];
+
+      expect(homeRoute.id).toBe("custom-home-id");
+    });
+
+    it("Nested relative paths are handled correctly", () => {
+      const { route, layout } = relative("app/routes/admin");
+
+      const routes = [
+        layout("_layout.tsx", [
+          route("users", "users.tsx"),
+          route("settings", "settings.tsx"),
+        ]),
+      ];
+
+      const appDirectory = process.cwd();
+      const manifest = configRoutesToRouteManifest(appDirectory, routes);
+
+      const layoutRoute = Object.values(manifest).find((r) =>
+        r.file.includes("_layout"),
+      );
+      const usersRoute = Object.values(manifest).find((r) =>
+        r.file.includes("users"),
+      );
+
+      expect(layoutRoute?.id).toBe("app/routes/admin/_layout");
+      expect(usersRoute?.id).toBe("app/routes/admin/users");
+    });
+
+    it("Route IDs returned from useMatches() should be relative paths", () => {
+      const { route, layout, index } = relative("app/routes");
+      const routes = [
+        layout("root.tsx", [index("_index.tsx"), route("about", "about.tsx")]),
+      ];
+
+      const manifest = configRoutesToRouteManifest(process.cwd(), routes);
+      const matchIds = Object.keys(manifest);
+
+      console.log("Route IDs that useMatches() will return:", matchIds);
+
+      expect(matchIds).toEqual([
+        "app/routes/root",
+        "app/routes/_index",
+        "app/routes/about",
+      ]);
+    });
+  });
+
+  describe("Various signature tests", () => {
+    it("All route() overloads work correctly", () => {
+      const { route } = relative("app/routes");
+
+      const r1 = route("path1", "file1.tsx");
+      expect(r1.id).toBe("app/routes/file1");
+
+      const r2 = route("path2", "file2.tsx", [route("child", "child.tsx")]);
+      expect(r2.id).toBe("app/routes/file2");
+
+      const r3 = route("path3", "file3.tsx", { caseSensitive: true });
+      expect(r3.id).toBe("app/routes/file3");
+
+      const r4 = route("path4", "file4.tsx", { index: true }, [
+        route("child", "child.tsx"),
+      ]);
+      expect(r4.id).toBe("app/routes/file4");
+    });
+
+    it("All layout() overloads work correctly", () => {
+      const { layout } = relative("app/routes");
+
+      const l1 = layout("layout1.tsx");
+      expect(l1.id).toBe("app/routes/layout1");
+
+      const l2 = layout("layout2.tsx", [route("child", "child.tsx")]);
+      expect(l2.id).toBe("app/routes/layout2");
+
+      const l3 = layout("layout3.tsx", { id: "custom" });
+      expect(l3.id).toBe("custom");
+
+      const l4 = layout("layout4.tsx", {}, [route("child", "child.tsx")]);
+      expect(l4.id).toBe("app/routes/layout4");
+    });
+  });
+});

packages/react-router-dev/__tests__/route-config-test.ts

@@ -508,6 +508,7 @@ describe("route config", () => {
               },
             ],
             "file": "{{CWD}}/path/to/dirname/nested/parent.tsx",
+            "id": "path/to/dirname/nested/parent",
             "path": "parent",
           }
         `);
@@ -524,6 +525,7 @@ describe("route config", () => {
           [
             {
               "file": "{{CWD}}/path/to/dirname/nested/without-options.tsx",
+              "id": "path/to/dirname/nested/without-options",
               "index": true,
             },
             {
@@ -552,6 +554,7 @@ describe("route config", () => {
               },
             ],
             "file": "{{CWD}}/path/to/dirname/nested/parent.tsx",
+            "id": "path/to/dirname/nested/parent",
           }
         `);
       });

packages/react-router-dev/config/routes.ts

@@ -318,6 +318,14 @@ export { route, index, layout, prefix };
  * splitting route config into multiple files within different directories.
  */
 export function relative(directory: string): typeof helpers {
+  const generateRelativeId = (file: string): string => {
+    const joined = Path.join(directory, file);
+    const relativePath = Path.isAbsolute(joined)
+      ? Path.relative(process.cwd(), joined)
+      : joined;
+    return Path.normalize(stripFileExtension(relativePath));
+  };
+
   return {
     /**
      * Helper function for creating a route config entry, for use within
@@ -326,29 +334,93 @@ export function relative(directory: string): typeof helpers {
      * `relative` call that created this helper.
      */
     route: (path, file, ...rest) => {
-      return route(path, Path.resolve(directory, file), ...(rest as any));
+      const absolutePath = Path.resolve(directory, file);
+      const relativeId = generateRelativeId(file);
+
+      if (!rest || (rest as any).length === 0) {
+        return route(path, absolutePath, { id: relativeId });
+      }
+
+      const [first, second] = rest;
+
+      if (Array.isArray(first)) {
+        return route(path, absolutePath, { id: relativeId }, first);
+      }
+
+      const options = first as CreateRouteOptions;
+      const modifiedOptions = options.id
+        ? options
+        : { ...options, id: relativeId };
+
+      if (second !== undefined) {
+        return route(
+          path,
+          absolutePath,
+          modifiedOptions,
+          second as RouteConfigEntry[],
+        );
+      }
+
+      return route(path, absolutePath, modifiedOptions);
     },
+
     /**
      * Helper function for creating a route config entry for an index route, for
      * use within `routes.ts`. Note that this helper has been scoped, meaning
      * that file path will be resolved relative to the directory provided to the
      * `relative` call that created this helper.
      */
     index: (file, ...rest) => {
-      return index(Path.resolve(directory, file), ...(rest as any));
+      const absolutePath = Path.resolve(directory, file);
+      const relativeId = generateRelativeId(file);
+
+      if (!rest || rest.length === 0) {
+        return index(absolutePath, { id: relativeId });
+      }
+
+      const options = rest[0] as CreateIndexOptions;
+      const modifiedOptions = options.id
+        ? options
+        : { ...options, id: relativeId };
+      return index(absolutePath, modifiedOptions);
     },
+
     /**
      * Helper function for creating a route config entry for a layout route, for
      * use within `routes.ts`. Note that this helper has been scoped, meaning
      * that file path will be resolved relative to the directory provided to the
      * `relative` call that created this helper.
      */
     layout: (file, ...rest) => {
-      return layout(Path.resolve(directory, file), ...(rest as any));
+      const absolutePath = Path.resolve(directory, file);
+      const relativeId = generateRelativeId(file);
+
+      if (!rest || (rest as any).length === 0) {
+        return layout(absolutePath, { id: relativeId });
+      }
+
+      const [first, second] = rest;
+
+      if (Array.isArray(first)) {
+        return layout(absolutePath, { id: relativeId }, first);
+      }
+
+      const options = first as CreateLayoutOptions;
+      const modifiedOptions = options.id
+        ? options
+        : { ...options, id: relativeId };
+
+      if (second !== undefined) {
+        return layout(
+          absolutePath,
+          modifiedOptions,
+          second as RouteConfigEntry[],
+        );
+      }
+
+      return layout(absolutePath, modifiedOptions);
     },
 
-    // Passthrough of helper functions that don't need relative scoping so that
-    // a complete API is still provided.
     prefix,
   };
 }