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.

[ThomasStock]

What kind of issue did you have?
I have the same problem with the hook always returning type false

[mobihack]

Was finally able to solve my issue on this.

https://tanstack.com/router/latest/docs/framework/react/api/router/useRouterHook

⚠️⚠️⚠️ router.state is always up to date, but NOT REACTIVE. If you use router.state in a component, the component will not re-render when the router state changes. To get a reactive version of the router state, use the useRouterState hook.

So I used useRouterState and basically used it in the memo dependency and was able to solve the issue for the time being. SO the current code looks something like:

const routerState = useRouterState();
const matchRoute = useMatchRoute();
  
 const isSamplePath = useMemo(
    () =>
      (
        [
          "/dashboard/home",
          "/dashboard/applications",
          "/dashboard/applications/$applicationId",
        ] as const
      ).find((pattern) => matchRoute({ to: pattern })),
    [routerState, matchRoute] // <--- routerState here is needed, else same issue will persist
  );