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

Author: Madeorsk

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

@@ -27,6 +27,7 @@ import {
     NestedResourcesPrecedence,
     PathlessLayoutRoutesPriority,
     PathlessLayoutRoutesWithEmptyRoute,
+    PathlessLayoutRoutesWithIndexRoute,
 } from './tanStackRouterProvider.stories';
 import { tanStackRouterProvider } from './tanStackRouterProvider';
 
@@ -1523,6 +1524,22 @@ describe('tanStackRouterProvider', () => {
         });
     });
 
+    it('should match the index route as most specific within pathless layout routes', async () => {
+        window.location.hash = '#/posts';
+
+        render(<PathlessLayoutRoutesWithIndexRoute />);
+
+        await waitFor(() => {
+            expect(screen.getByTestId('posts-page')).toBeInTheDocument();
+        });
+
+        fireEvent.click(screen.getByText('Home (index)'));
+
+        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

@@ -1668,3 +1668,81 @@ export const PathlessLayoutRoutesWithEmptyRoute = () => {
         </RouterProviderContext.Provider>
     );
 };
+
+export const PathlessLayoutRoutesWithIndexRoute = () => {
+    const { RouterWrapper } = tanStackRouterProvider;
+
+    return (
+        <RouterProviderContext.Provider value={tanStackRouterProvider}>
+            <RouterWrapper>
+                <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 (index)
+                                    </LinkBase>
+                                </nav>
+                                <div
+                                    style={{
+                                        border: '2px solid blue',
+                                        padding: 20,
+                                        marginTop: 10,
+                                    }}
+                                >
+                                    <RouterOutlet />
+                                </div>
+                            </div>
+                        }
+                    >
+                        <Route
+                            index
+                            element={
+                                <div data-testid="home-page">
+                                    Home Page (index)
+                                </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

@@ -744,6 +744,7 @@ 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 ||
+                            childMatch.route.index ||
                             (bestMatch.route.path !== undefined &&
                                 childMatch.route.path !== undefined &&
                                 isMoreSpecific(