TanStack / TanStack/router

`useMatchRoute` gives inconsistent behavior in relation to `trailingSlash` configuration

Open
#7,689 1 comment 0 reactions 0 assignees View on GitHub

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
  1. Start the app
  2. Navigate to /nested (no trailing slash). Observe that the useMatch says 'true'
  3. Navigate to /nested/ (trailing slash). Observe that the useMatch says '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
Image Image
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.