Fix handling of routes with no path

Author: fzaninotto

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

@@ -23,6 +23,7 @@ import {
     NestedRoutesWithOutlet,
     NestedResources,
     QueryParameters,
+    PathlessLayoutRoutes,
 } from './tanStackRouterProvider.stories';
 import { tanStackRouterProvider } from './tanStackRouterProvider';
 
@@ -1410,4 +1411,35 @@ describe('tanStackRouterProvider', () => {
             });
         });
     });
+
+    describe('Pathless Layout Routes', () => {
+        it('should match pathless layout routes with child routes', async () => {
+            window.location.hash = '#/posts';
+
+            render(<PathlessLayoutRoutes />);
+
+            await waitFor(() => {
+                expect(screen.getByText('Layout Wrapper')).toBeInTheDocument();
+                expect(screen.getByTestId('posts-page')).toBeInTheDocument();
+            });
+        });
+
+        it('should navigate between child routes within pathless layout', async () => {
+            window.location.hash = '#/posts';
+
+            render(<PathlessLayoutRoutes />);
+
+            await waitFor(() => {
+                expect(screen.getByText('Layout Wrapper')).toBeInTheDocument();
+                expect(screen.getByTestId('posts-page')).toBeInTheDocument();
+            });
+
+            fireEvent.click(screen.getByText('Comments'));
+
+            await waitFor(() => {
+                expect(screen.getByText('Layout Wrapper')).toBeInTheDocument();
+                expect(screen.getByTestId('comments-page')).toBeInTheDocument();
+            });
+        });
+    });
 });

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

@@ -26,6 +26,7 @@ import {
     CustomRoutes,
     Form,
     useInput,
+    RouterProviderContext,
     type InputProps,
 } from 'ra-core';
 
@@ -1308,3 +1309,57 @@ export const NestedRoutesWithOutlet = () => {
         </CoreAdmin>
     );
 };
+
+export const PathlessLayoutRoutes = () => {
+    const { RouterWrapper } = tanStackRouterProvider;
+
+    return (
+        <RouterProviderContext.Provider value={tanStackRouterProvider}>
+            <RouterWrapper>
+                <Routes>
+                    <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>
+                                <div
+                                    style={{
+                                        border: '2px solid blue',
+                                        padding: 20,
+                                        marginTop: 10,
+                                    }}
+                                >
+                                    <RouterOutlet />
+                                </div>
+                            </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

@@ -523,7 +523,7 @@ const Navigate = ({ to, replace, state }: RouterNavigateProps) => {
  */
 const Route = (_props: RouterRouteProps): null => null;
 interface RouteConfig {
-    path: string;
+    path?: string;
     element?: ReactNode;
     index?: boolean;
     children?: RouteConfig[];
@@ -590,7 +590,7 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
                         React.isValidElement(child) && isRouteElement(child)
                 )
                 .map(child => ({
-                    path: (child.props as RouterRouteProps).path ?? '',
+                    path: (child.props as RouterRouteProps).path,
                     element: (child.props as RouterRouteProps).element,
                     index: (child.props as RouterRouteProps).index,
                     children: (child.props as RouterRouteProps).children
@@ -606,6 +606,28 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
     // Get parent params to merge with current match params
     const parentParams = React.useContext(ParamsContext);
 
+    // Helper to check if any child route matches the pathname
+    const childRouteMatches = (
+        children: RouteConfig[] | undefined,
+        path: string
+    ): boolean => {
+        if (!children) return false;
+        for (const child of children) {
+            if (child.index && (path === '/' || path === '')) {
+                return true;
+            }
+            if (child.path) {
+                const match = matchPath({ path: child.path, end: false }, path);
+                if (match) return true;
+            }
+            // Recursively check nested pathless layouts
+            if (!child.path && child.children) {
+                if (childRouteMatches(child.children, path)) return true;
+            }
+        }
+        return false;
+    };
+
     // Find matching route and calculate the new matched path
     const matchResult = useMemo(() => {
         for (const route of routes) {
@@ -614,6 +636,17 @@ const Routes = ({ children, location: locationProp }: RouterRoutesProps) => {
                 const newMatchedPath = parentMatchedPath || '/';
                 return { route, matchedPath: newMatchedPath, params: {} };
             }
+
+            // Pathless layout route: path is undefined (not empty string) and has children
+            // 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: {} };
+                }
+            }
+
             if (route.path !== undefined) {
                 const match = matchPath(route.path, pathname);
                 if (match) {