Routes that share parts of the path are not matched #528
Description
Describe the bug
When creating multiple routes that have some part of the path in common and have the same parent, some routes are not matched
Example:
const indexRoute = new Route({
getParentRoute: () => rootRoute,
path: '/',
component: () => <h1>Home Page</h1>,
});
const blogRoute = new Route({
getParentRoute: () => rootRoute,
path: 'blog',
component: () => <h1>Blog Page</h1>,
});
const postsRoute = new Route({
getParentRoute: () => rootRoute,
path: 'blog/posts',
component: () => <h1>Posts Page</h1>,
});
const authorsPage = new Route({
getParentRoute: () => rootRoute,
path: 'blog/posts/authors',
component: () => <h1>Authors Page</h1>,
});
const routeTree = rootRoute.addChildren([
indexRoute,
blogRoute,
postsRoute,
authorsPage,
]);In this example the path the following matches happen:
✅ / matches the indexRoute
✅ /blog matches the blogRoute
❌ /blog/posts matches the blogRoute
❌ /blog/posts/authors matches the blogRoute
Your Example Website or App
https://stackblitz.com/edit/tanstack-router-inner-path-slashes-bug?file=src/main.tsx
Steps to Reproduce the Bug or Issue
- create a vite app with the react-ts starter template
- add @tanstack/react-router v0.0.1-beta.82
- create multipe routes on the root level that have some parts of the path in common
See the reproduction stackblitz link.
Expected behavior
Every route should match its path and only the route with the matching path should be displayed (if they all have the rootRoute as parent):
✅ / matches the indexRoute
✅ /blog matches the blogRoute
✅ /blog/posts matches the postsRoute
✅ /blog/posts/authors matches the authorsRoute
Screenshots or Videos
Bildschirmaufnahme.2023-02-14.um.09.29.36.mov
Platform
- OS: macOS
- Browser: chrome
- Version: 0.0.1-beta.82
Additional context
No response