fix(router-core): processRouteTree orders routes w/ prefix / suffix based on their lengths (#4850)

When ordering routes to determine "which one will match in priority", we
try to follow the "more specific 1st" principle.

Currently, 2 routes with the same pattern, but with prefixes of
different lengths, are counted as having the same specificity, and thus
are not re-ordered. For example:
- `/f{$param}`
- `/foo{$param}`

In this case, assuming `f{$param}.tsx` is returned 1st by the OS when
listing route files (which it is by alphabetical order), a path
`/foobar` will match `/f{$param}`.

This PR proposes we take the `length` of the `prefix` and `suffix` into
account when sorting routes. In this example this would mean
`/foo{$param}` takes priority because it is considered more specific.

Author: Sheraff

packages/router-core/src/router.ts

@@ -3212,18 +3212,36 @@ export type ProcessRouteTreeResult<TRouteLike extends RouteLike> = {
 const REQUIRED_PARAM_BASE_SCORE = 0.5
 const OPTIONAL_PARAM_BASE_SCORE = 0.4
 const WILDCARD_PARAM_BASE_SCORE = 0.25
+const BOTH_PRESENCE_BASE_SCORE = 0.05
+const PREFIX_PRESENCE_BASE_SCORE = 0.02
+const SUFFIX_PRESENCE_BASE_SCORE = 0.01
+const PREFIX_LENGTH_SCORE_MULTIPLIER = 0.0002
+const SUFFIX_LENGTH_SCORE_MULTIPLIER = 0.0001
 
 function handleParam(segment: Segment, baseScore: number) {
   if (segment.prefixSegment && segment.suffixSegment) {
-    return baseScore + 0.05
+    return (
+      baseScore +
+      BOTH_PRESENCE_BASE_SCORE +
+      PREFIX_LENGTH_SCORE_MULTIPLIER * segment.prefixSegment.length +
+      SUFFIX_LENGTH_SCORE_MULTIPLIER * segment.suffixSegment.length
+    )
   }
 
   if (segment.prefixSegment) {
-    return baseScore + 0.02
+    return (
+      baseScore +
+      PREFIX_PRESENCE_BASE_SCORE +
+      PREFIX_LENGTH_SCORE_MULTIPLIER * segment.prefixSegment.length
+    )
   }
 
   if (segment.suffixSegment) {
-    return baseScore + 0.01
+    return (
+      baseScore +
+      SUFFIX_PRESENCE_BASE_SCORE +
+      SUFFIX_LENGTH_SCORE_MULTIPLIER * segment.suffixSegment.length
+    )
   }
 
   return baseScore

packages/router-core/tests/processRouteTree.test.ts

@@ -425,5 +425,30 @@ describe('processRouteTree', () => {
         expect(result.flatRoutes.map((r) => r.id)).toEqual(expected)
       },
     )
+
+    it.each([
+      {
+        routes: ['/f{$param}', '/foo{$param}'],
+        expected: ['/foo{$param}', '/f{$param}'],
+      },
+      {
+        routes: ['/{$param}r', '/{$param}bar'],
+        expected: ['/{$param}bar', '/{$param}r'],
+      },
+      {
+        routes: ['/f{$param}bar', '/foo{$param}r'],
+        expected: ['/foo{$param}r', '/f{$param}bar'],
+      },
+      {
+        routes: ['/foo{$param}r', '/f{$param}baaaaaar'], // very long suffix can "override" prefix
+        expected: ['/f{$param}baaaaaar', '/foo{$param}r'],
+      },
+    ])(
+      'length of prefix and suffix are considered in ranking: $routes',
+      ({ routes, expected }) => {
+        const result = processRouteTree({ routeTree: createRouteTree(routes) })
+        expect(result.flatRoutes.map((r) => r.id)).toEqual(expected)
+      },
+    )
   })
 })