How to properly use useMatchRoute hook?

[jog1t]

Hi there!

First and foremost, amazing work, really loved the idea that everything is typed. Working with this library so far was a breeze.
When building custom breadcrumbs (not the usual one, that follows the url), I stumbled across useMatchRoute. Unfortunately, I did not fully understand how to use it, does not matter what path I'll pass there, always this function will return false :(

const matchRoute = useMatchRoute();
const result = matchRoute({ to: "/teams/$groupId" })
//        ^? false

and

const matchRoute = useMatchRoute();
const result = matchRoute({ to: "/teams/$groupId", fuzzy: true })
//        ^? false

In this example, I want to match all routes that matches the passed route so /teams/1234 will be a match, and /teams/4321 as well. From the docs, I figured out that the result should return matched params — so in this case, the result should be type of { groupId: string } | false or something similar.

Found a workaround to just cast it, but this somehow seems to be wrong.

const matchRoute = useMatchRoute();

const groupMatch = matchRoute({ to: "/teams/$groupId" }) as
    | false
    | { groupId: string };

What's more interesting, the code works in the browser just fine, so it seems that the types are wrongly inferred, or I'm passing something wrong here. Would appreciate a guidance how to make it work! :D

"@tanstack/react-router": "^1.31.1",

[schiller-manuel]

can you please provide a minimal complete example, e.g. by forking one of the existing examples on stackblitz?

[jog1t]

Thanks, creating a repro repo helped me find an issue - a different Typescript configuration.