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

joseph0926 · 2025-08-12T08:07:48Z

Note: I'm not a native English speaker and used translation tools for this PR.

Problem

When using the relative() helper, route IDs were generated using absolute file paths instead of relative paths.

const { route } = relative('app/routes');
route('home', 'home.tsx')
// Before: ID = "/home/user/project/app/routes/home" (absolute)
// After:  ID = "app/routes/home" (relative)

Solution

Modified relative() helper to pre-generate route IDs based on relative paths. This prevents configRoutesToRouteManifest from creating absolute path IDs later.

Implementation Process

Created reproduction test to verify the issue
Implemented fix in relative() function
Verified all tests pass

The key insight: configRoutesToRouteManifest always generates an ID if not provided. By pre-generating relative IDs in relative(), we prevent absolute path IDs from being created.

Technical Details

TypeScript Challenge

The rest parameter was inferred as tuple type 1 | 2 due to function overloads. Had to use type casting for length checks:

if (!rest || (rest as any).length === 0) {
  // handle no arguments case
}

Why IDs are added

Without our fix: configRoutesToRouteManifest calls createRouteId(absolutePath) → absolute ID
With our fix: We provide relative ID → configRoutesToRouteManifest uses it → relative ID

Changes

packages/react-router-dev/config/routes.ts: Modified relative() to generate IDs
packages/react-router-dev/__tests__/relative-test.ts: Added comprehensive tests
packages/react-router-dev/__tests__/route-config-test.ts: Updated snapshots (IDs now present)

Test Results

pnpm test packages/react-router-dev/

✓ All 155 tests passing
✓ Snapshots updated to reflect ID generation

The snapshot changes show routes created with relative() now have IDs:

Routes without explicit IDs: auto-generated relative path IDs added
Routes with explicit IDs: unchanged

Breaking Changes

None. This fix only affects automatic ID generation when using relative() helper.

changeset-bot · 2025-08-12T08:07:52Z

⚠️ No Changeset found

Latest commit: e568b37

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

remix-cla-bot · 2025-08-12T08:07:55Z

Hi @joseph0926,

Welcome, and thank you for contributing to React Router!

Before we consider your pull request, we ask that you sign our Contributor License Agreement (CLA). We require this only once.

You may review the CLA and sign it by adding your name to contributors.yml.

Once the CLA is signed, the CLA Signed label will be added to the pull request.

If you have already signed the CLA and received this response in error, or if you have any questions, please contact us at [email protected].

Thanks!

- The Remix team

remix-cla-bot · 2025-08-12T08:11:33Z

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

joseph0926 · 2025-08-17T23:54:51Z

345882a

To ensure this PR reliably fixes the issue and is production-safe, I've added 35 test cases covering issue reproduction, Windows paths, special characters, environment independence, function overloads, and integration scenarios

joseph0926 · 2025-08-25T06:54:08Z

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

@@ -318,6 +318,12 @@ 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 => {


Helper function to generate consistent relative path IDs. This ensures route IDs are always relative to the project root, not absolute file system paths. Uses the existing createRouteId utility for consistency with the rest of the codebase.

joseph0926 · 2025-08-25T06:55:07Z

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

+      const absolutePath = Path.resolve(directory, file);
+      const relativeId = generateRelativeId(file);
+
+      if (!rest || (rest as any).length === 0) {


when no additional arguments are provided, we simply add the generated relative ID to ensure it's not created as an absolute path later in configRoutesToRouteManifest.

joseph0926 · 2025-08-25T06:55:47Z

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

+      }
+
+      const options = first as CreateRouteOptions;
+      const modifiedOptions = options.id


Preserve explicitly provided IDs while adding relative IDs for routes without them. This maintains backward compatibility

joseph0926 · 2025-08-25T06:56:27Z

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

    /**
     * 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);


Simplified version of the route logic since index() has fewer overloads. (generate relative ID, preserve explicit IDs if provided.)

joseph0926 · 2025-08-25T07:02:54Z

Hi @markdalgleish @pcattori ,

When you have a chance, could you take a look at this PR? Happy to address any feedback or questions about the implementation.

Thanks!

remix-cla-bot bot added the CLA Signed label Aug 12, 2025

joseph0926 mentioned this pull request Aug 13, 2025

Is it normal for the routeId to change when using relative() in a routes config? #14125

Open

brophdawg11 requested review from markdalgleish and pcattori August 14, 2025 14:29

brophdawg11 added pkg:@react-router/dev feat:routes.ts labels Aug 14, 2025

younghoonkim and others added 3 commits August 18, 2025 08:51

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

d4cf1df

chore: sign CLA

338b3bd

test: add comprehensive test coverage for relative route ID generation

345882a

joseph0926 force-pushed the fix/relative-route-ids branch from 5211322 to 345882a Compare August 17, 2025 23:51

joseph0926 added 2 commits August 25, 2025 07:54

Merge branch 'dev' into fix/relative-route-ids

546747d

refactor: simplify generateRelativeId and reuse createRouteId utility

e568b37

joseph0926 commented Aug 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

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

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

Uh oh!

joseph0926 commented Aug 12, 2025

Uh oh!

changeset-bot bot commented Aug 12, 2025 •

edited

Loading

Uh oh!

remix-cla-bot bot commented Aug 12, 2025

Uh oh!

remix-cla-bot bot commented Aug 12, 2025

Uh oh!

joseph0926 commented Aug 17, 2025

Uh oh!

joseph0926 Aug 25, 2025

Uh oh!

joseph0926 Aug 25, 2025

Uh oh!

joseph0926 Aug 25, 2025

Uh oh!

joseph0926 Aug 25, 2025

Uh oh!

joseph0926 commented Aug 25, 2025

Uh oh!

Uh oh!

Uh oh!

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

Are you sure you want to change the base?

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

Uh oh!

Conversation

joseph0926 commented Aug 12, 2025

Problem

Solution

Implementation Process

Technical Details

TypeScript Challenge

Why IDs are added

Changes

Test Results

Breaking Changes

Uh oh!

changeset-bot bot commented Aug 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

remix-cla-bot bot commented Aug 12, 2025

Uh oh!

remix-cla-bot bot commented Aug 12, 2025

Uh oh!

joseph0926 commented Aug 17, 2025

Uh oh!

joseph0926 Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

joseph0926 Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

joseph0926 Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

joseph0926 Aug 25, 2025

Choose a reason for hiding this comment

Uh oh!

joseph0926 commented Aug 25, 2025

Uh oh!

Uh oh!

changeset-bot bot commented Aug 12, 2025 •

edited

Loading