Skip to content

useMatchRoute gives inconsistent behavior in relation to trailingSlash configuration #7689

Description

@bjornpijnacker

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions