Trim parent route id prefix when creating lazy routes

packages/react-router/src/fileRoute.ts

@@ -6,6 +6,7 @@ import { useLoaderData } from './useLoaderData'
 import { useSearch } from './useSearch'
 import { useParams } from './useParams'
 import { useNavigate } from './useNavigate'
+import { getLastPathSegment } from './path'
 import type { Constrain } from './utils'
 import type {
   AnyContext,
@@ -21,7 +22,7 @@ import type {
   UpdatableRouteOptions,
 } from './route'
 import type { MakeRouteMatch } from './Matches'
-import type { AnyRouter, RegisteredRouter } from './router'
+import type { RegisteredRouter } from './router'
 import type { RouteById, RouteIds } from './routeInfo'
 
 export interface FileRoutesByPath {
@@ -261,7 +262,10 @@ export function createLazyRoute<
   TRoute extends AnyRoute = RouteById<RegisteredRouter['routeTree'], TId>,
 >(id: TId) {
   return (opts: LazyRouteOptions) => {
-    return new LazyRoute<TRoute>({ id: id as any, ...opts })
+    return new LazyRoute<TRoute>({
+      id: getLastPathSegment(id as any) as any,
+      ...opts,
+    })
   }
 }
 
@@ -276,5 +280,8 @@ export function createLazyFileRoute<
   TRoute extends FileRoutesByPath[TFilePath]['preLoaderRoute'],
 >(id: TFilePath) {
   return (opts: LazyRouteOptions) =>
-    new LazyRoute<TRoute>({ id: removeGroups(id), ...opts })
+    new LazyRoute<TRoute>({
+      id: getLastPathSegment(removeGroups(id)) as any,
+      ...opts,
+    })
 }

packages/react-router/src/path.ts

@@ -41,6 +41,15 @@ export function removeTrailingSlash(value: string, basepath: string): string {
   return value
 }
 
+export function getLastPathSegment(path: string) {
+  if (typeof path !== 'string') {
+    return undefined
+  }
+
+  const match = path.match(/(\/[^/]+)\/?$/)
+  return match?.[1]
+}
+
 // intended to only compare path name
 // see the usage in the isActive under useLinkProps
 // /sample/path1 = /sample/path1/

packages/react-router/src/route.ts

@@ -16,7 +16,7 @@ import type { NavigateOptions, ParsePathParams, ToMaskOptions } from './link'
 import type { ParsedLocation } from './location'
 import type { RouteById, RouteIds, RoutePaths } from './routeInfo'
 import type { AnyRouter, RegisteredRouter, Router } from './router'
-import type { Assign, Constrain, Expand, NoInfer, PickRequired } from './utils'
+import type { Assign, Constrain, Expand, NoInfer } from './utils'
 import type { BuildLocationFn, NavigateFn } from './RouterProvider'
 import type { NotFoundError } from './not-found'
 import type { LazyRoute } from './fileRoute'
@@ -1029,7 +1029,7 @@ export class Route<
       path = trimPathLeft(path)
     }
 
-    const customId = options?.id || path
+    const customId = path || options?.id
 
     // Strip the parentId prefix from the first level of children
     let id = isRoot

packages/react-router/tests/fileRoute.test.ts

@@ -48,3 +48,61 @@ describe('createLazyRoute has the same hooks as getRouteApi', () => {
     },
   )
 })
+
+describe('LazyRoute options.id should not include parent segments', () => {
+  describe('createLazyRoute', () => {
+    it('should set id to the last path segment without parents', () => {
+      const id = '/parent_a/parent_b/child'
+      const route = createLazyRoute(id)({})
+      expect(route.options.id).toBe('/child')
+    })
+
+    it('should remove group patterns from id', () => {
+      const idWithGroups = '/parent_a/(group)/child'
+      const route = createLazyRoute(idWithGroups)({})
+      expect(route.options.id).toBe('/child')
+    })
+
+    it('should replace multiple slashes with a single slash', () => {
+      const idWithDoubleSlashes = '/parent_a//child'
+      const route = createLazyRoute(idWithDoubleSlashes)({})
+      expect(route.options.id).toBe('/child')
+    })
+
+    it('should not change anything when the id is already trimmed', ()=> {
+      const normalId = '/child'
+      const route = createLazyRoute(normalId)({})
+      expect(route.options.id).toBe('/child') 
+    })
+  })
+
+  describe('createLazyFileRoute', () => {
+    it('should set id to the last path segment without parents', () => {
+      const id = '/parent_a/parent_b/child'
+      // @ts-expect-error
+      const route = createLazyFileRoute(id)({})
+      expect(route.options.id).toBe('/child')
+    })
+
+    it('should remove group patterns from id', () => {
+      const idWithGroups = '/parent_a/(group)/child'
+      // @ts-expect-error
+      const route = createLazyFileRoute(idWithGroups)({})
+      expect(route.options.id).toBe('/child')
+    })
+
+    it('should replace multiple slashes with a single slash', () => {
+      const idWithDoubleSlashes = '/parent_a//child'
+      // @ts-expect-error
+      const route = createLazyFileRoute(idWithDoubleSlashes)({})
+      expect(route.options.id).toBe('/child')
+    })
+
+    it('should not change anything when the id is already trimmed', ()=> {
+      const normalId = '/child'
+      // @ts-expect-error
+      const route = createLazyFileRoute(normalId)({})
+      expect(route.options.id).toBe('/child') 
+    })
+  })
+})

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/path.test.ts

@@ -1,6 +1,7 @@
 import { describe, expect, it } from 'vitest'
 import {
   exactPathTest,
+  getLastPathSegment,
   interpolatePath,
   removeBasepath,
   removeTrailingSlash,
@@ -276,3 +277,85 @@ describe('interpolatePath', () => {
     })
   })
 })
+
+describe('getLastPathSegment', () => {
+  it.each([
+    {
+      name: 'should return the last segment with leading slash when path ends with a slash',
+      path: '/_protected/test/',
+      expected: '/test',
+    },
+    {
+      name: 'should return the last segment with leading slash when path does not end with a slash',
+      path: '/_protected/test',
+      expected: '/test',
+    },
+    {
+      name: 'should return the last segment in a longer path with trailing slash',
+      path: '/another/path/example/',
+      expected: '/example',
+    },
+    {
+      name: 'should return the last segment in a longer path without trailing slash',
+      path: '/another/path/example',
+      expected: '/example',
+    },
+    {
+      name: 'should return the only segment with leading slash',
+      path: '/single',
+      expected: '/single',
+    },
+    {
+      name: 'should return the last segment with leading slash in a nested path',
+      path: '/trailing/slash/',
+      expected: '/slash',
+    },
+    {
+      name: 'should return undefined for root path',
+      path: '/',
+      expected: undefined,
+    },
+    {
+      name: 'should return undefined for empty string',
+      path: '',
+      expected: undefined,
+    },
+    {
+      name: 'should handle paths with numbers correctly',
+      path: '/users/123/',
+      expected: '/123',
+    },
+    {
+      name: 'should handle paths with special characters',
+      path: '/path/with-special_chars!',
+      expected: '/with-special_chars!',
+    },
+    {
+      name: 'should handle paths with multiple special characters and trailing slash',
+      path: '/path/with/$pecial-Chars123/',
+      expected: '/$pecial-Chars123',
+    },
+    {
+      name: 'should return undefined when there is no segment after the last slash',
+      path: '/path/to/directory//',
+      expected: undefined,
+    },
+    {
+      name: 'should handle paths without leading slash',
+      path: 'no/leading/slash',
+      expected: '/slash',
+    },
+    {
+      name: 'should handle single slash',
+      path: '/',
+      expected: undefined,
+    },
+    {
+      name: 'should handle path with multiple trailing slashes',
+      path: '/multiple/trailing/slashes///',
+      expected: undefined,
+    },
+  ])('$name', ({ path, expected }) => {
+    expect(getLastPathSegment(path)).toBe(expected)
+  })
+})

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

@@ -73,6 +73,54 @@ 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 protectedFileBasedLayoutParentRoute = createRoute({
+    getParentRoute: () => protectedFileBasedLayoutRoute,
+    path: '/fileBasedParent',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) =>
+      f.FileRoute('/_protected/_fileBasedLayout/fileBasedParent'),
+    ),
+  )
+  const protectedLayoutParentRoute = createRoute({
+    getParentRoute: () => protectedLayoutRoute,
+    path: '/parent',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) => f.Route('/_protected/_layout/parent')),
+  )
+  const protectedLayoutParentChildRoute = createRoute({
+    getParentRoute: () => protectedLayoutParentRoute,
+    path: '/child',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) =>
+      f.Route('/_protected/_layout/parent/child'),
+    ),
+  )
+  const protectedFileBasedLayoutParentChildRoute = createRoute({
+    getParentRoute: () => protectedFileBasedLayoutParentRoute,
+    path: '/child',
+  }).lazy(() =>
+    import('./lazy/normal').then((f) =>
+      f.FileRoute('/_protected/_fileBasedLayout/fileBasedParent/child'),
+    ),
+  )
 
   const routeTree = rootRoute.addChildren([
     indexRoute,
@@ -85,6 +133,18 @@ function createTestRouter(initialHistory?: RouterHistory) {
       pathSegmentLayoutSplatIndexRoute,
       pathSegmentLayoutSplatSplatRoute,
     ]),
+    protectedRoute.addChildren([
+      protectedLayoutRoute.addChildren([
+        protectedLayoutParentRoute.addChildren([
+          protectedLayoutParentChildRoute,
+        ]),
+      ]),
+      protectedFileBasedLayoutRoute.addChildren([
+        protectedFileBasedLayoutParentRoute.addChildren([
+          protectedFileBasedLayoutParentChildRoute,
+        ]),
+      ]),
+    ]),
   ])
 
   const router = createRouter({ routeTree, history })
@@ -580,3 +640,77 @@ 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: '/parent/child',
+      }),
+    )
+
+    await act(() =>
+      router.navigate({
+        to: '/filBasedParent/child',
+      }),
+    )
+
+    router.buildRouteTree()
+
+    const rebuiltRouteIds = Object.keys(router.routesById)
+
+    originalRouteIds.forEach((id) => {
+      expect(rebuiltRouteIds).toContain(id)
+    })
+
+    rebuiltRouteIds.forEach((id) => {
+      expect(originalRouteIds).toContain(id)
+    })
+  })
+})
+
+describe('route id uniqueness', () => {
+  it('flatRoute should not have routes with duplicated route ids', () => {
+    const { router } = createTestRouter(
+      createMemoryHistory({ initialEntries: ['/'] }),
+    )
+    const routeIdSet = new Set<string>()
+
+    router.flatRoutes.forEach((route) => {
+      expect(routeIdSet.has(route.id)).toBe(false)
+      routeIdSet.add(route.id)
+    })
+  })
+
+  it('routesById should not have routes duplicated route ids', () => {
+    const { router } = createTestRouter(
+      createMemoryHistory({ initialEntries: ['/'] }),
+    )
+
+    const routeIdSet = new Set<string>()
+
+    Object.values(router.routesById).forEach((route) => {
+      expect(routeIdSet.has(route.id)).toBe(false)
+      routeIdSet.add(route.id)
+    })
+  })
+
+  it('routesByPath should not have routes duplicated route ids', () => {
+    const { router } = createTestRouter(
+      createMemoryHistory({ initialEntries: ['/'] }),
+    )
+
+    const routeIdSet = new Set<string>()
+
+    Object.values(router.routesByPath).forEach((route) => {
+      expect(routeIdSet.has(route.id)).toBe(false)
+      routeIdSet.add(route.id)
+    })
+  })
+})