Bug: useLocation() not in sync with useMatchRoute()

[mrlubos]

Hey! I am not going to open a bug issue just yet because I didn't create a reproducible example. However, I believe there's a bug, so I want to bring it up. In my React app, I have a component that does something like this

function MyComponent() {
  const location = useLocation()
  const matchRoute = useMatchRoute()
  
  const matchPath = matchRoute({ to: '/foo' });

  console.log(location.pathname) // prints '/foo'
  console.log(matchPath) // prints false
}

I would expect the match to exist if location.pathname prints the exact route I am passing in to parameter. I am able to get it working if I do pending: true, but that works only in certain stage of the transition. So for now, my question is: should matchPath return a match in my component when location.pathname equals to in matchRoute() call?

[kleemansbricsys]

having the same issue

[schiller-manuel]

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

[mobihack]

Having the same issue here

[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
  );