`useMatchRoute` gives inconsistent behavior in relation to `trailingSlash` configuration
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 15.1k
- Forks
- 1.9k
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 143
Description
Which project does this relate to?
Router
Describe the bug
A file-based (index, in my case) route at /path/index.tsx can be matched by either the URL "/path" or by "/path/". When using useMatchRoute({ to: "/path" }), this is only true in the prior case, even though the latter case is also resolved to the same route file.
We use useMatchRoute to highlight active navigation items. This causes inconsistency in our UI unless we use useMatchRoute({ to: "/path" }) || useMatchRoute({ to: "/path/" }).
Expected behavior is that the routing and the useMatchRoute utility behave consistently to one another; either neither match a route, or both match the route.
Complete minimal reproducer
https://github.com/bjornpijnacker/bug-reports/tree/main/20260625-tanstack-route-matching
Steps to Reproduce the Bug
- Start the app
- Navigate to
/nested(no trailing slash). Observe that theuseMatchsays 'true' - Navigate to
/nested/(trailing slash). Observe that theuseMatchsays 'false'
Expected behavior
Both URLs match to the same route seeing as both URLs render the same page. Therefore I would expect useMatch to return the same result in both cases too. In any case, I would expect the two to be consistent such that I can easily determine which navigation item is being rendered.
Screenshots or Videos
Platform
- Router Version: latest
- OS: n/a
- Browser: all
- Browser Version: n/a
- Bundler: vite
- Bundler Version: 8.0.0
Additional context
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked minimal reproducer and run the app, then compare useMatchRoute or useMatch results for /nested and /nested/. Trace how the trailingSlash configuration and the /path/index.tsx route are handled; done means both URLs produce consistent matching behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100