Parent route match in useMatchRoute

[morzel85]

Let's say I have a route like /user/profile, I can then use useMatchRoute to check if the current route is /user/profile.

I would also like to check if parent /user route is matched (for example to style parent navigation item).

What's the best way to check if parent route is matching? Is it supported directly in Tanstack Router v1 or do I need to do some custom substring checks?

[schiller-manuel]

how would the parent route not match if the child route matches? I probably don't understand your problem, can you please create a minimal example on codesandbox?

[morzel85]

I need to verify if current URL is not only matching some nested route, but that it also matches the parent route.

I've modified the Basic example from the docs, assume that I'm interested to know if current '/posts/1' (nested route) is also matching the '/posts'. So I need to do something similar to what the Link component must be doing for its active state detection.

I'm looking for the idiomatic way (preferably avoiding custom string matching on current window location).

Code sample

[schiller-manuel]

You can use matchRoute({to: '/posts', fuzzy: true}).
There was a bug with fuzzy matching but this is fixed in v1.4.5 https://github.com/TanStack/router/releases/tag/v1.4.5

[morzel85]

Looks good in 1.4.5 with fuzzy, thanks for quick fix!

[andyblack19]

@schiller-manuel Just building on this discussion as it's fairly related...
How am I able to perform the same fuzzy matching against a route id?

I want to style a parent element based on one of its child Links being active, but the child Links do not all have the same path prefix.

Example folder structure below (_resources.tsx has some beforeLoad auth checks in).

_resources/whitepapers.tsx
_resources/articles.tsx

This will render in a nav along the lines of:

Resources   <-- onclick expand/collapse the sub-menu. Need to style this element when any child link is active.
|-- Whitepapers
|-- Articles

I was hoping to be able to do something like: matchRouteById({ to: "_resources", fuzzy: true }) ??

[schiller-manuel]

you could use https://tanstack.com/router/v1/docs/framework/react/api/router/useChildMatchesHook to find out if and which child of a particular route is matched