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

[joseph0926]

Fixes #14125

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

1. Created reproduction test to verify the issue
2. Implemented fix in relative() function
3. 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[bot]]

⚠️ No Changeset found

Latest commit: 447561e7ea4a27abdc6e2ce3e29b2d7b9eba15ed

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[bot]]

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[bot]]

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

[joseph0926]

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]

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!