Fix route specificity comparison by adding a catch-all detection

fzaninotto · fzaninotto · commit fa50f65466e8 · 2026-01-21T15:51:25.000+01:00
This approach is simpler but less robust than a route scoring algorithm - we may have to revisit it later.
diff --git a/packages/ra-router-tanstack/src/tanStackRouterProvider.spec.tsx b/packages/ra-router-tanstack/src/tanStackRouterProvider.spec.tsx
@@ -24,6 +24,7 @@ import {
     NestedResources,
     QueryParameters,
     PathlessLayoutRoutes,
+    NestedResourcesPrecedence,
 } from './tanStackRouterProvider.stories';
 import { tanStackRouterProvider } from './tanStackRouterProvider';
 
@@ -719,7 +720,9 @@ describe('tanStackRouterProvider', () => {
                 expect(screen.getByText('Post Details')).toBeInTheDocument();
             });
             // Check that search params are preserved in location
-            expect(screen.getByText(/\"search\": \"\?foo=bar\"/)).toBeInTheDocument();
+            expect(
+                screen.getByText(/\"search\": \"\?foo=bar\"/)
+            ).toBeInTheDocument();
         });
 
         it('should support location object with only search (no pathname)', async () => {
@@ -730,14 +733,20 @@ describe('tanStackRouterProvider', () => {
                 ).toBeInTheDocument();
             });
 
-            fireEvent.click(screen.getByText('Go to same page with search param'));
+            fireEvent.click(
+                screen.getByText('Go to same page with search param')
+            );
 
             await waitFor(() => {
                 // Should stay on the same page (Link Tests page)
-                expect(screen.getByText('Link Component Tests')).toBeInTheDocument();
+                expect(
+                    screen.getByText('Link Component Tests')
+                ).toBeInTheDocument();
             });
             // Check that search params are added
-            expect(screen.getByText(/\"search\": \"\?foo=bar\"/)).toBeInTheDocument();
+            expect(
+                screen.getByText(/\"search\": \"\?foo=bar\"/)
+            ).toBeInTheDocument();
         });
     });
 
@@ -1442,4 +1451,29 @@ describe('tanStackRouterProvider', () => {
             });
         });
     });
+
+    describe('Resource Children (Route as children of Resource)', () => {
+        it('should navigate to child routes without matching parent edit route', async () => {
+            render(<NestedResourcesPrecedence />);
+
+            // Wait for posts list to load
+            await screen.findByText('Post #1');
+
+            // Click on a post to go to edit page
+            fireEvent.click(screen.getByText('Post #1'));
+
+            // Wait for edit page
+            await screen.findByText('Post Details');
+
+            // Click to view comments (child route)
+            fireEvent.click(screen.getByText('View Comments'));
+
+            // Should navigate to comments page, not stay on edit
+            await waitFor(() => {
+                expect(
+                    screen.getByText(/Comments for Post/)
+                ).toBeInTheDocument();
+            });
+        });
+    });
 });
diff --git a/packages/ra-router-tanstack/src/tanStackRouterProvider.stories.tsx b/packages/ra-router-tanstack/src/tanStackRouterProvider.stories.tsx
@@ -1082,6 +1082,69 @@ export const NestedResources = () => (
     </CoreAdmin>
 );
 
+const PostEditWithLinkToComments = () => {
+    const navigate = useNavigate();
+    return (
+        <ShowBase
+            resource="posts"
+            render={({ record }) => (
+                <div style={{ padding: 20 }}>
+                    <h2>Post Details</h2>
+                    {record && <h3>{record.title}</h3>}
+                    <button onClick={() => navigate('/posts')}>
+                        Back to List
+                    </button>
+                    <button
+                        onClick={() => navigate(`/posts/${record.id}/comments`)}
+                    >
+                        View Comments
+                    </button>
+                </div>
+            )}
+        />
+    );
+};
+
+const CommentList = () => {
+    const { post_id } = useParams();
+    const navigate = useNavigate();
+    return (
+        <ListBase
+            resource="comments"
+            filter={{ post_id }}
+            render={({ data }) => (
+                <div style={{ padding: 20 }}>
+                    <h2>Comments for Post {post_id}</h2>
+                    <ul>
+                        {data?.map(record => (
+                            <li key={record.id}>{record.body}</li>
+                        ))}
+                    </ul>
+                    <button onClick={() => navigate(`/posts/${post_id}/show`)}>
+                        Back to Post
+                    </button>
+                </div>
+            )}
+        />
+    );
+};
+
+export const NestedResourcesPrecedence = () => (
+    <CoreAdmin
+        routerProvider={tanStackRouterProvider}
+        dataProvider={dataProvider}
+        layout={LayoutWithLocationDisplay}
+    >
+        <Resource
+            name="posts"
+            list={PostList}
+            edit={PostEditWithLinkToComments}
+        >
+            <Route path=":post_id/comments" element={<CommentList />} />
+        </Resource>
+    </CoreAdmin>
+);
+
 /**
  * Tests that query parameters work correctly (for list sorting, filtering, pagination).
  * This tests the navigate({ search: '?...' }) pattern used by useListParams.
diff --git a/packages/ra-router-tanstack/src/tanStackRouterProvider.tsx b/packages/ra-router-tanstack/src/tanStackRouterProvider.tsx
@@ -616,7 +616,7 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
             if (child.index && (path === '/' || path === '')) {
                 return true;
             }
-            if (child.path) {
+            if (child.path !== undefined) {
                 const match = matchPath({ path: child.path, end: false }, path);
                 if (match) return true;
             }
@@ -628,8 +628,65 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
         return false;
     };
 
+    // Check if a route pattern has a catch-all at the end
+    const hasCatchAll = (path: string): boolean => {
+        return path.endsWith('/*') || path === '*';
+    };
+
+    // Check if routeB is more specific than routeA when both match the same path
+    // A route is more specific if it matches more segments with static/param patterns
+    // before resorting to a catch-all
+    const isMoreSpecific = (pathA: string, pathB: string): boolean => {
+        const segmentsA = pathA.split('/').filter(Boolean);
+        const segmentsB = pathB.split('/').filter(Boolean);
+
+        // Count non-catchall segments
+        const nonCatchallA = segmentsA.filter(s => s !== '*').length;
+        const nonCatchallB = segmentsB.filter(s => s !== '*').length;
+
+        // More non-catchall segments = more specific
+        if (nonCatchallB > nonCatchallA) return true;
+
+        // Same number of non-catchall segments, but B has no catchall while A does
+        if (
+            nonCatchallB === nonCatchallA &&
+            hasCatchAll(pathA) &&
+            !hasCatchAll(pathB)
+        ) {
+            return true;
+        }
+
+        // If B has more static segments, it's more specific
+        const staticA = segmentsA.filter(
+            s => !s.startsWith(':') && s !== '*'
+        ).length;
+        const staticB = segmentsB.filter(
+            s => !s.startsWith(':') && s !== '*'
+        ).length;
+        if (staticB > staticA) return true;
+
+        return false;
+    };
+
     // Find matching route and calculate the new matched path
     const matchResult = useMemo(() => {
+        // Helper to calculate matched path
+        const calcMatchedPath = (matchedPortion: string): string => {
+            if (!parentMatchedPath || parentMatchedPath === '/') {
+                return matchedPortion;
+            } else if (matchedPortion === '/') {
+                return parentMatchedPath;
+            } else {
+                return `${parentMatchedPath}${matchedPortion}`;
+            }
+        };
+
+        let bestMatch: {
+            route: RouteConfig;
+            matchedPath: string;
+            params: Record<string, string | undefined>;
+        } | null = null;
+
         for (const route of routes) {
             if (route.index && (pathname === '/' || pathname === '')) {
                 // Index route: matched path stays the same
@@ -641,7 +698,6 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
             // Match if any child route would match the pathname
             if (route.path === undefined && route.children) {
                 if (childRouteMatches(route.children, pathname)) {
-                    // Pathless layout doesn't consume any path
                     const newMatchedPath = parentMatchedPath || '/';
                     return { route, matchedPath: newMatchedPath, params: {} };
                 }
@@ -650,27 +706,46 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
             if (route.path !== undefined) {
                 const match = matchPath(route.path, pathname);
                 if (match) {
-                    // Calculate new matched path by combining parent + matched portion
                     const matchedPortion = match.pathnameBase || '/';
-                    let newMatchedPath: string;
-                    if (!parentMatchedPath || parentMatchedPath === '/') {
-                        // No parent or root parent - just use matched portion
-                        newMatchedPath = matchedPortion;
-                    } else if (matchedPortion === '/') {
-                        // Matched root - keep parent
-                        newMatchedPath = parentMatchedPath;
-                    } else {
-                        // Combine parent and matched portion
-                        newMatchedPath = `${parentMatchedPath}${matchedPortion}`;
-                    }
-                    return {
+                    const newMatchedPath = calcMatchedPath(matchedPortion);
+
+                    const currentMatch = {
                         route,
                         matchedPath: newMatchedPath,
                         params: match.params,
                     };
+
+                    // If no best match yet, use this one
+                    if (!bestMatch) {
+                        bestMatch = currentMatch;
+                        // If this match doesn't use a catch-all, return immediately
+                        if (!hasCatchAll(route.path)) {
+                            return bestMatch;
+                        }
+                        // Otherwise, keep looking for more specific matches
+                        continue;
+                    }
+
+                    // Check if this route is more specific than the current best
+                    if (
+                        bestMatch.route.path &&
+                        isMoreSpecific(bestMatch.route.path, route.path)
+                    ) {
+                        bestMatch = currentMatch;
+                        // If this match doesn't use a catch-all, return immediately
+                        if (!hasCatchAll(route.path)) {
+                            return bestMatch;
+                        }
+                    }
                 }
             }
         }
+
+        // If we found a match (possibly a catch-all), return it
+        if (bestMatch) {
+            return bestMatch;
+        }
+
         // Check for catch-all route (path="*")
         const catchAll = routes.find(r => r.path === '*');
         if (catchAll) {
@@ -682,7 +757,14 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
             };
         }
         return null;
-    }, [routes, pathname, parentMatchedPath, fullPathname]);
+    }, [
+        routes,
+        parentMatchedPath,
+        pathname,
+        childRouteMatches,
+        isMoreSpecific,
+        fullPathname,
+    ]);
 
     // Now that all hooks have been called, we can safely return early
     // if we're outside the basename scope
