Trim parent route id prefix when creating lazy routes

packages/react-router/src/route.ts

@@ -1029,7 +1029,7 @@ export class Route<
       path = trimPathLeft(path)
     }
 
-    const customId = path || getLastPathSegment(options?.id)
+    const customId = path || options?.id
 
     // Strip the parentId prefix from the first level of children
     let id = isRoot

packages/react-router/tests/lazy/normal.tsx

@@ -0,0 +1,13 @@
+import { createLazyFileRoute, createLazyRoute } from '../../src'
+
+export function Route(id: string) {
+  return createLazyRoute(id)({
+    component: () => <h1>I'm a normal route</h1>,
+  })
+}
+
+export function FileRoute(id: string) {
+  return createLazyFileRoute(id as any)({
+    component: () => <h1>I'm a normal file route</h1>,
+  })
+}

packages/react-router/tests/router.test.tsx

@@ -73,6 +73,38 @@ function createTestRouter(initialHistory?: RouterHistory) {
     getParentRoute: () => pathSegmentLayoutSplatRoute,
     path: '$',
   })
+  const protectedRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    id: '/_protected',
+  }).lazy(() => import('./lazy/normal').then((f) => f.Route('/_protected')))
+  const protectedLayoutRoute = createRoute({
+    getParentRoute: () => protectedRoute,
+    id: '/_layout',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) => f.Route('/_protected/_layout')),
+  )
+  const protectedFileBasedLayoutRoute = createRoute({
+    getParentRoute: () => protectedRoute,
+    id: '/_fileBasedLayout',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) =>
+      f.FileRoute('/_protected/_fileBasedLayout'),
+    ),
+  )
+  const protectedFileBasedLayoutTestRoute = createRoute({
+    getParentRoute: () => protectedFileBasedLayoutRoute,
+    path: '/fileBasedTest',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) =>
+      f.FileRoute('/_protected/_fileBasedLayout/fileBasedTest'),
+    ),
+  )
+  const protectedLayoutTestRoute = createRoute({
+    getParentRoute: () => protectedLayoutRoute,
+    path: '/test',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) => f.Route('/_protected/_layout/test')),
+  )
 
   const routeTree = rootRoute.addChildren([
     indexRoute,
@@ -85,6 +117,12 @@ function createTestRouter(initialHistory?: RouterHistory) {
       pathSegmentLayoutSplatIndexRoute,
       pathSegmentLayoutSplatSplatRoute,
     ]),
+    protectedRoute.addChildren([
+      protectedLayoutRoute.addChildren([protectedLayoutTestRoute]),
+      protectedFileBasedLayoutRoute.addChildren([
+        protectedFileBasedLayoutTestRoute,
+      ]),
+    ]),
   ])
 
   const router = createRouter({ routeTree, history })
@@ -580,3 +618,38 @@ describe('router matches URLs to route definitions', () => {
     ])
   })
 })
+
+describe('route ids should be consistent after rebuilding the route tree', () => {
+  it('should have the same route ids after rebuilding the route tree', async () => {
+    const { router } = createTestRouter(
+      createMemoryHistory({ initialEntries: ['/'] }),
+    )
+
+    const originalRouteIds = Object.keys(router.routesById)
+
+    await act(() =>
+      router.navigate({
+        to: '/test',
+      }),
+    )
+
+    await act(() =>
+      router.navigate({
+        to: '/fileBasedTest',
+      }),
+    )
+
+    router.buildRouteTree()
+
+    const rebuiltRouteIds = Object.keys(router.routesById)
+
+    console.log(originalRouteIds, rebuiltRouteIds)
+    originalRouteIds.forEach((id) => {
+      expect(rebuiltRouteIds).toContain(id)
+    })
+
+    // rebuiltRouteIds.forEach((id) => {
+    //   expect(originalRouteIds).toContain(id)
+    // })
+  })
+})