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

[wonu]

Reproduction

https://stackblitz.com/edit/github-k4qxzj9k-avwnbkjs

https://stackblitz.com/edit/github-k4qxzj9k

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 20.19.1 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.8.2 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
  @react-router/dev: ^7.7.1 => 7.7.1 
  @react-router/node: ^7.7.1 => 7.7.1 
  @react-router/serve: ^7.7.1 => 7.7.1 
  react-router: ^7.7.1 => 7.7.1 
  vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

Route ids should still reflect a relative file path when the relative helper is used

Actual Behavior

They reflect the absolute path to the route files:

// useMatches().map((m) => m.id)
[
  "root",
  "/home/projects/github-k4qxzj9k-avwnbkjs/app/routes/home"
]

[brophdawg11]

You're creating two separate layout routes in your files - you need to lift the layout route to be a common parent of the ... routes if you want them to share a layout: https://stackblitz.com/edit/github-k4qxzj9k-avwnbkjs?file=app%2Froutes.ts

[wonu]

I only separated it for comparison, but I was also using just one shared layout declared in routes.ts.
(To be honest, I'm not sure what the technical difference is between separating them and not.)

Anyway, that's not what I was trying to say.
Even after commenting out the duplicate layout declarations, I'm still not getting the layout data in /relative.
The difference from the example you wrote is where the layout() is declared.
Is it the wrong approach to declare it in the same file as relative()?

Your relative-routes.ts:

const { layout, route } = relative('app/routes');

export const relativeRoutes = [
  route('relative', 'relative.tsx'),
] satisfies RouteConfig;

My relative-routes.ts:

const { layout, route } = relative('app/routes');

export const relativeRoutes = [
  layout('layout.tsx', [route('relative', 'relative.tsx')]),
] satisfies RouteConfig;

[brophdawg11]

Ah, ok sorry that wasn't clear from the repro. I simplified it in https://stackblitz.com/edit/github-k4qxzj9k-avwnbkjs and updated the issue description and will kick this over to @markdalgleish since he's more familiar with the relative helper.

[joseph0926]

The root cause of this issue lies in how configRoutesToRouteManifest -> walk() generates route IDs

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

Line 363 in 3d76762

let id = route.id || createRouteId(route.file);

Currently, the logic assigns the ID using route.id || createRouteId(route.file)

This means that during walk(), regardless of whether a route was created via route() or relative().route(), it will use the provided id if available; otherwise, it falls back to route.file.

As a result, if relative().route() does not explicitly generate and pass an ID based on the relative path, the described issue occurs.

To address this, I have proposed the following fix in my PR
#14156