continuing-cyan

How to get typed routeMatch

Hi. I'm using matches from useRouterState and need to get typed match for some of them. I'm trying to use that :

for(const match of matches) {
  switch (match.routeId) {
    case '/app/products/$productId':
    match.params.productId;
  }
}

for(const match of matches) {
  switch (match.routeId) {
    case '/app/products/$productId':
    match.params.productId;
  }
}

But the problem is that typescript says that match.params does not include productId. How can I get the productId param in this case ? Thank you.

11 Replies

relaxed-coral•2y ago

this is currently unfortunately not possible without an additional check (if ('productId' in match.params)) or casting.

continuing-cyanOP•2y ago

ok thx

relaxed-coral•2y ago

@Chris Horobin can we aid TS to automatically infer the type inside the case statement ?

absent-sapphire•2y ago

Would be if we design it as a union of matches for each route. Although I'd like to know the use case for this. Usually you can match a specific route with matchRoute?

relaxed-coral•2y ago

+1 for matchRoute @Maqui can you use this instead?

continuing-cyanOP•2y ago

No I can't. What I am doing is getting all current routes matching and searching for each of them (starting from the latest) a routeId matching any case in a switch. If it doesn't match anything, then it searchs for a value in the staticData of the route. The problem if I use matchRoute is that if, for example, a /app/$testId/test1 contains the static data and before I use matchRoute for the /app/$testId, I'll get the data from /app/$testId and not for /app/$testId/test1 as expected. As I said before, I need to get data from the closest matching route that has any, and with a matchRoute, I can't To be more clear, what am I doing is creating a tab if we are on route that has a title as staticData. For other routes, I need the params to create the tab title, so I can't use staticData. It is where I use my switch to handle these cases.

relaxed-coral•2y ago

this probably does not help either, but I just wanted to tell you there is another hook that could be used https://tanstack.com/router/latest/docs/framework/react/api/router/useMatchesHook

useMatches hook | TanStack Router React Docs

The useMatches hook returns all of the RouteMatch objects from the router regardless of its callers position in the React component tree. useMatches options

continuing-cyanOP•2y ago

Oh yeah, thx. But what's the difference between useMatches and matches from useRouterState ?

relaxed-coral•2y ago

I just checked, there is no difference 😜

relaxed-coral•2y ago

https://github.com/TanStack/router/blob/main/packages%2Freact-router%2Fsrc%2FMatches.tsx#L573

GitHub

router/packages/react-router/src/Matches.tsx at main · TanStack/rou...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

continuing-cyanOP•2y ago

okay thx

Gaming

Programming

How to get typed routeMatch

Did you find this page helpful?