Add test cases for route id consistency

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

@@ -2,7 +2,7 @@ import invariant from 'tiny-invariant'
 import { useMatch } from './useMatch'
 import { useLoaderDeps } from './useLoaderDeps'
 import { useLoaderData } from './useLoaderData'
-import { joinPaths, trimPathLeft } from './path'
+import { getLastPathSegment, joinPaths, trimPathLeft } from './path'
 import { useParams } from './useParams'
 import { useSearch } from './useSearch'
 import { notFound } from './not-found'
@@ -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 || getLastPathSegment(options?.id)
 
     // Strip the parentId prefix from the first level of children
     let id = isRoot

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,88 @@ describe('interpolatePath', () => {
     })
   })
 })
+
+describe('getLastPathSegment', () => {
+  ;[
+    {
+      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,
+    },
+  ].forEach(({ name, path, expected }) => {
+    it(name, () => {
+      const result = getLastPathSegment(path)
+      expect(result).toBe(expected)
+    })
+  })
+})