Fix empty path to be more specific than a catch-all.

Author: Madeorsk

packages/ra-router-tanstack/src/tanStackRouterProvider.spec.tsx

@@ -26,6 +26,7 @@ import {
     PathlessLayoutRoutes,
     NestedResourcesPrecedence,
     PathlessLayoutRoutesPriority,
+    PathlessLayoutRoutesWithEmptyRoute,
 } from './tanStackRouterProvider.stories';
 import { tanStackRouterProvider } from './tanStackRouterProvider';
 
@@ -1506,6 +1507,22 @@ describe('tanStackRouterProvider', () => {
         });
     });
 
+    it('should match the empty path route as most specific within pathless layout routes', async () => {
+        window.location.hash = '#/posts';
+
+        render(<PathlessLayoutRoutesWithEmptyRoute />);
+
+        await waitFor(() => {
+            expect(screen.getByTestId('posts-page')).toBeInTheDocument();
+        });
+
+        fireEvent.click(screen.getByText('Home (path="")'));
+
+        await waitFor(() => {
+            expect(screen.getByTestId('home-page')).toBeInTheDocument();
+        });
+    });
+
     describe('Resource Children (Route as children of Resource)', () => {
         it('should navigate to child routes without matching parent edit route', async () => {
             render(<NestedResourcesPrecedence />);

packages/ra-router-tanstack/src/tanStackRouterProvider.stories.tsx

@@ -1585,3 +1585,86 @@ export const PathlessLayoutRoutesPriority = () => {
         </RouterProviderContext.Provider>
     );
 };
+
+export const PathlessLayoutRoutesWithEmptyRoute = () => {
+    const { RouterWrapper } = tanStackRouterProvider;
+
+    return (
+        <RouterProviderContext.Provider value={tanStackRouterProvider}>
+            <RouterWrapper>
+                <p style={{ marginBottom: 10 }}>
+                    Expected: "/" renders Home Page (path=""). If you see
+                    Catch-all Page instead, path="" is being treated as
+                    catch-all.
+                </p>
+                <Routes>
+                    <Route
+                        path="*"
+                        element={
+                            <div data-testid="catchall-page">
+                                Catch-all Page
+                            </div>
+                        }
+                    />
+                    <Route
+                        element={
+                            <div data-testid="layout-wrapper">
+                                <h2>Layout Wrapper</h2>
+                                <nav>
+                                    <LinkBase
+                                        to="/posts"
+                                        style={{ marginRight: 10 }}
+                                    >
+                                        Posts
+                                    </LinkBase>
+                                    <LinkBase to="/comments">Comments</LinkBase>
+                                </nav>
+                                <nav>
+                                    <LinkBase
+                                        to="/"
+                                        style={{ marginRight: 10 }}
+                                    >
+                                        Home (path="")
+                                    </LinkBase>
+                                </nav>
+                                <div
+                                    style={{
+                                        border: '2px solid blue',
+                                        padding: 20,
+                                        marginTop: 10,
+                                    }}
+                                >
+                                    <RouterOutlet />
+                                </div>
+                            </div>
+                        }
+                    >
+                        <Route
+                            path=""
+                            element={
+                                <div data-testid="home-page">
+                                    Home Page (path="")
+                                </div>
+                            }
+                        />
+                        <Route
+                            path="/posts"
+                            element={
+                                <div data-testid="posts-page">Posts Page</div>
+                            }
+                        />
+                        <Route
+                            path="/comments"
+                            element={
+                                <div data-testid="comments-page">
+                                    Comments Page
+                                </div>
+                            }
+                        />
+                    </Route>
+                </Routes>
+                <LocationDisplay />
+            </RouterWrapper>
+        </RouterProviderContext.Provider>
+    );
+};

packages/ra-router-tanstack/src/tanStackRouterProvider.tsx

@@ -651,7 +651,7 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
 
     // Check if a route pattern has a catch-all at the end
     const hasCatchAll = (path: string | undefined): boolean => {
-        return !path || path.endsWith('/*') || path === '*';
+        return path === undefined || path.endsWith('/*') || path === '*';
     };
 
     // Check if routeB is more specific than routeA when both match the same path
@@ -744,8 +744,8 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
                         childMatch &&
                         // If no best match yet, or the child route is more specific than the current best, use this one
                         (!bestMatch ||
-                            (bestMatch.route.path &&
-                                childMatch.route.path &&
+                            (bestMatch.route.path !== undefined &&
+                                childMatch.route.path !== undefined &&
                                 isMoreSpecific(
                                     bestMatch.route.path,
                                     childMatch.route.path
@@ -782,7 +782,7 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
                         // If no best match yet, or this route is more specific than the current best, use this one
                         if (
                             !bestMatch ||
-                            (bestMatch.route.path &&
+                            (bestMatch.route.path !== undefined &&
                                 isMoreSpecific(
                                     bestMatch.route.path,
                                     route.path