useMatchRoute seems to never work when under a basepath

[samgqroberts]

Describe the bug

useMatchRoute() seems to always return false when the router and vite are configured to have a basepath.

Your Example Website or App

https://stackblitz.com/github/tanstack/router/tree/main/examples/react/basic-file-based?embed=1&theme=light

Steps to Reproduce the Bug or Issue

1. Go to the file-based router StackBlitz example
2. In src/routes/__root.tsx, import useMatchRoute from @tanstack/react-route and add something that shows the results of it matching against '/' to the DOM, like {'matchRoute result: ' + JSON.stringify(useMatchRoute()({ to: '/' }))} right above <Outlet />
   • observe that we see "matchRoute result: {}" in the rendered output, which is a positive match, since we're on the root path.
   • this is expected behavior so far
3. Update app to have a basepath
   1. In vite.config.ts add base: '/somebase',
   2. In src/main.tsx add basepath: '/somebase', to createRouter options
   3. In rendered output window append /somebase to url
4. Observe the bug: we see matchRoute result: false in the rendered output

Expected behavior

As a user I expected the useMatchRoute() invocation to continue positively matching against the '/' route even when a basepath was added to the router and vite configs. I have tried many things, like trying to match it against '/somebase' or '/somebase/', no dice, it always returns false. This also happens for nested routes, not just the top-level '/' route.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

(love this project :) )

[schiller-manuel]

can you please provide a complete example by forking the existing stackblitz and applying the steps you described?

[samgqroberts]

@schiller-manuel Sorry, not familiar with Stackblitz, didn't realize it was that easy. Tell me if this works for you: https://stackblitz.com/edit/tanstack-router-fwxnpz?file=src%2Froutes%2F__root.tsx. You should see matchRoute result: false in the rendered output, which is the bug - it should be matchRoute result: {} I believe

[samgqroberts]

@schiller-manuel Thank you for the very quick turnaround! I'll confirm the fix once a new version of @tanstack/react-router has been published with this fix

[schiller-manuel]

was already released

https://github.com/TanStack/router/releases/tag/v1.16.2

[samgqroberts]

Confirmed in my project! Thank you @schiller-manuel