Align route manifest specificity sorting with React Router

Author: onurtemizkan

packages/react/src/reactrouter-compat-utils/route-manifest.ts

@@ -125,47 +125,49 @@ function splitPath(path: string): string[] {
   return path.split('/').filter(Boolean);
 }
 
+/**
+ * React Router scoring weights.
+ * https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/utils.ts
+ */
+const STATIC_SEGMENT_SCORE = 10;
+const DYNAMIC_SEGMENT_SCORE = 3;
+const SPLAT_PENALTY = -2;
+
+/** Computes a specificity score for a route pattern. */
+function computeScore(pattern: string): number {
+  const segments = splitPath(pattern);
+  let score = 0;
+
+  for (const segment of segments) {
+    if (segment === '*') {
+      score += SPLAT_PENALTY;
+    } else if (segment.startsWith(':')) {
+      score += DYNAMIC_SEGMENT_SCORE;
+    } else {
+      score += STATIC_SEGMENT_SCORE;
+    }
+  }
+
+  return score;
+}
+
 /**
  * Sorts route patterns by specificity (most specific first).
- * Mimics React Router's ranking algorithm from computeScore():
+ * Implements React Router's ranking algorithm from computeScore():
  * https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/utils.ts
  *
- * React Router scoring: static=10, dynamic=3, splat=-2 penalty, index=+2 bonus
- * Our simplified approach produces equivalent ordering:
- * - Non-wildcard patterns are more specific than wildcard patterns
- * - More segments = more specific
- * - Among same-length patterns, more literal segments = more specific
- * - Equal specificity: preserves manifest order (same as React Router)
+ * React Router scoring: static=10, dynamic=3, splat=-2 penalty
+ * Higher score = more specific pattern.
+ * Equal scores preserve manifest order (same as React Router).
  *
  * Note: Users should order their manifest from most specific to least specific
  * when patterns have equal specificity (e.g., `/users/:id/settings` and `/:type/123/settings`).
  */
 function sortBySpecificity(manifest: string[]): string[] {
   return [...manifest].sort((a, b) => {
-    const aSegments = splitPath(a);
-    const bSegments = splitPath(b);
-    const aHasWildcard = aSegments.length > 0 && aSegments[aSegments.length - 1] === '*';
-    const bHasWildcard = bSegments.length > 0 && bSegments[bSegments.length - 1] === '*';
-
-    // Non-wildcard patterns are more specific than wildcard patterns
-    if (aHasWildcard !== bHasWildcard) {
-      return aHasWildcard ? 1 : -1;
-    }
-
-    // For comparison, exclude wildcard from segment count
-    const aLen = aHasWildcard ? aSegments.length - 1 : aSegments.length;
-    const bLen = bHasWildcard ? bSegments.length - 1 : bSegments.length;
-
-    // More segments = more specific
-    if (aLen !== bLen) {
-      return bLen - aLen;
-    }
-
-    // Same length: count literal segments (non-params, non-wildcards)
-    const aLiterals = aSegments.filter(s => !s.startsWith(':') && s !== '*').length;
-    const bLiterals = bSegments.filter(s => !s.startsWith(':') && s !== '*').length;
+    const aScore = computeScore(a);
+    const bScore = computeScore(b);
 
-    // More literals = more specific (equal specificity preserves original order)
-    return bLiterals - aLiterals;
+    return bScore - aScore;
   });
 }

packages/react/test/reactrouter-compat-utils/route-manifest.test.ts

@@ -78,7 +78,7 @@ describe('matchRouteManifest', () => {
   describe('specificity sorting (React Router parity)', () => {
     // Verifies our sorting matches React Router's computeScore() algorithm
     // See: https://github.com/remix-run/react-router/blob/main/packages/react-router/lib/router/utils.ts
-    // React Router scoring: static=10, dynamic=3, splat=-2 penalty, index=+2 bonus
+    // React Router scoring: static=10, dynamic=3, splat=-2 penalty
     // For equal scores, manifest order is preserved (same as React Router)
 
     it('returns more specific route when multiple match', () => {
@@ -88,36 +88,32 @@ describe('matchRouteManifest', () => {
 
     it('prefers literal segments over parameters (React Router: static=10 > dynamic=3)', () => {
       const manifestWithOverlap = ['/users/:id', '/users/me'];
-      // /users/me: 2 + 10 + 10 = 22
-      // /users/:id: 2 + 10 + 3 = 15
       expect(matchRouteManifest('/users/me', manifestWithOverlap)).toBe('/users/me');
       expect(matchRouteManifest('/users/123', manifestWithOverlap)).toBe('/users/:id');
     });
 
     it('prefers more segments (React Router: higher segment count = higher base score)', () => {
       const m = ['/users', '/users/:id', '/users/:id/posts'];
-      // /users: 1 + 10 = 11
-      // /users/:id: 2 + 10 + 3 = 15
-      // /users/:id/posts: 3 + 10 + 3 + 10 = 26
       expect(matchRouteManifest('/users/123/posts', m)).toBe('/users/:id/posts');
     });
 
     it('prefers non-wildcard over wildcard (React Router: splat=-2 penalty)', () => {
       const m = ['/docs/*', '/docs/api'];
-      // /docs/*: 2 + 10 + (-2) = 10
-      // /docs/api: 2 + 10 + 10 = 22
       expect(matchRouteManifest('/docs/api', m)).toBe('/docs/api');
     });
 
     it('prefers longer wildcard prefix over shorter (React Router: more segments before splat)', () => {
       const m = ['/*', '/docs/*', '/docs/api/*'];
-      // /*: 1 + (-2) = -1
-      // /docs/*: 2 + 10 + (-2) = 10
-      // /docs/api/*: 3 + 10 + 10 + (-2) = 21
       expect(matchRouteManifest('/docs/api/methods', m)).toBe('/docs/api/*');
       expect(matchRouteManifest('/docs/guide', m)).toBe('/docs/*');
       expect(matchRouteManifest('/other', m)).toBe('/*');
     });
+
+    it('prefers static segments over dynamic in wildcard patterns (React Router: static=10 > dynamic=3)', () => {
+      // /a/b/* ranks higher than /:x/:y/:z/* despite fewer prefix segments
+      const m = ['/:x/:y/:z/*', '/a/b/*'];
+      expect(matchRouteManifest('/a/b/c/d', m)).toBe('/a/b/*');
+    });
   });
 
   describe('no match', () => {