Skip to content

Fix the most specific matching route when using pathless routes #11138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
djhi merged 4 commits into from
Jan 29, 2026
Merged

Fix the most specific matching route when using pathless routes #11138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55cfe54
Fix the most specific matching route when using pathless routes.
Madeorsk Jan 26, 2026
82fbe32
Correctly handle pathless route in hasCatchAll.
Madeorsk Jan 27, 2026
e53c695
Fix empty path to be more specific than a catch-all.
Madeorsk Jan 27, 2026
3a8d27e
Fix index path to be more specific than a catch-all.
Madeorsk Jan 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 59 additions & 0 deletions packages/ra-router-tanstack/src/tanStackRouterProvider.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,9 @@ import {
QueryParameters,
PathlessLayoutRoutes,
NestedResourcesPrecedence,
PathlessLayoutRoutesPriority,
PathlessLayoutRoutesWithEmptyRoute,
PathlessLayoutRoutesWithIndexRoute,
} from './tanStackRouterProvider.stories';
import { tanStackRouterProvider } from './tanStackRouterProvider';

Expand Down Expand Up @@ -1479,6 +1482,62 @@ describe('tanStackRouterProvider', () => {
expect(screen.getByTestId('comments-page')).toBeInTheDocument();
});
});

it('should match the most specific layout route within pathless layout routes', async () => {
window.location.hash = '#/posts';

render(<PathlessLayoutRoutesPriority />);

await waitFor(() => {
expect(screen.getByTestId('posts-page')).toBeInTheDocument();
});

fireEvent.click(screen.getByText('User'));

await waitFor(() => {
expect(screen.getByTestId('users-page')).toBeInTheDocument();
});

fireEvent.click(screen.getByText('Block a user'));

await waitFor(() => {
expect(
screen.getByTestId('block-user-page')
).toBeInTheDocument();
});
});
});

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();
});
});

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)', () => {
Expand Down
265 changes: 265 additions & 0 deletions packages/ra-router-tanstack/src/tanStackRouterProvider.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1481,3 +1481,268 @@ export const PathlessLayoutRoutes = () => {
</RouterProviderContext.Provider>
);
};

export const PathlessLayoutRoutesPriority = () => {
const { RouterWrapper } = tanStackRouterProvider;

return (
<RouterProviderContext.Provider value={tanStackRouterProvider}>
<RouterWrapper>
<div data-testid="layout-wrapper">
<nav>
<LinkBase to="/posts" style={{ marginRight: 10 }}>
Posts
</LinkBase>
<LinkBase to="/comments" style={{ marginRight: 10 }}>
Comments
</LinkBase>
<LinkBase
to="/users/john_doe"
style={{ marginRight: 10 }}
>
User
</LinkBase>
<LinkBase
to="/users/jane_doe/block"
style={{ marginRight: 10 }}
>
Block a user
</LinkBase>
Comment on lines +1499 to +1510
Copy link
Copy Markdown
Member

@fzaninotto fzaninotto Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't these two routes share the same root? i.e. either john_doe or jane_doe? Otherwise I don't see the point of the test.

Copy link
Copy Markdown
Contributor Author

@Madeorsk Madeorsk Jan 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't actually matter. What we're testing here is that /users/:username/block route is working as expected (meaning it should show the "Block a user" and not the catch-all "Users View"). The shared root of the two routes is /users and that's enough. But I can use john_doe in the two links if you think it's more logical.

</nav>
<div
style={{
border: '2px solid blue',
padding: 20,
marginTop: 10,
}}
>
<Routes>
<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
element={
<div
style={{
border: '2px solid green',
padding: 20,
marginTop: 10,
}}
>
<RouterOutlet />
</div>
}
>
<Route
path="/users/*"
element={
<div data-testid="users-page">
Users View
</div>
}
/>
</Route>
<Route
element={
<div
style={{
border: '2px solid red',
padding: 20,
marginTop: 10,
}}
>
<RouterOutlet />
</div>
}
>
<Route
path="/users/:username/block"
element={
<div data-testid="block-user-page">
Block a user
</div>
}
/>
</Route>
</Routes>
</div>
</div>
<LocationDisplay />
</RouterWrapper>
</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>
);
};

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>
);
};
Loading
Loading