Wrong route id for preloaded routes after rebuild route tree

[stevenlyd]

Which project does this relate to?

Router

Describe the bug

After a route (it needs to have a lazy route) /_protected/test got preloaded, then we call router.buildRouteTree() to rebuild the route tree again, that route will have a wrong id /_protected/_protected/test.

Your Example Website or App

https://stackblitz.com/edit/vitejs-vite-s8qswn?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. Open my StackBlitz example.
2. It should automatically run the project. If not, just npm run start
3. Open browser devtool's console.
4. Click the first button to print router.routesById, in the console you can confirm all routes' ids are fine.
5. Click the second button, it preloads the /_protected/test route.
6. Click the third button to run router.buildRouteTree()
7. Click the fourth button to print router.routesById again, in the console you can see the preloaded route /test now has a wrong id: /_protected/_protected/test

Expected behavior

No matter how many times I rebuild the route tree, the result should be consistent.
I'm doing dynamic route injection, so I need to rebuild the route tree after there is a new route got injected.

Screenshots or Videos

duplicated_id_prefix.mp4

Platform

• OS: [Windows]
• Browser: [Chrome]
• Version: [1.58.3]

Additional context

How the issue happened

1. This is currently how we generate id for a route instance in its init() method:

    const customId = options?.id || path // Uses path as id's fallback

    // Strip the parentId prefix from the first level of children
    let id = isRoot
      ? rootRouteId
      : joinPaths([
          this.parentRoute.id === rootRouteId ? '' : this.parentRoute.id,
          customId,
        ])

Related code: https://github.com/TanStack/router/blob/main/packages/react-router/src/route.ts#L1032

2. During the first initialization of the router, everything is fine because it fall back to the path, and the path doesn't contain a prefix from parent.

3. When we preload the route, the lazy route's options will be assign to the primary route object, so that the primary route object now has an id in its options property. Related code: https://github.com/TanStack/router/blob/main/packages/react-router/src/router.ts#L2247

4. Now we call router.buildRouteTree() to manually rebuild it, now the customId will be /_protected/test, and we are joining it with parent's id again, so we get /_protected/_protected/test.

I believe we should trim the parant prefix when using options.id as customId