Convert NavigationOptions -> RouteId
In our application, we have a configuration file which routeIds are active in the application. This let's use put routes behind feature flags or prevent specific users from accessing a route based on whether we decide they are allowed access. Auth is handled differently, but for example, if we are mid way through a feature, AB testing, or want to only enough a feature in development, this config can be used to determine if the route being loaded is active in beforeLoad.
We have two functions for this
1. isRouteActive(beforeLoadOpts) - Isomorphic, runs in beforeLoad
2. useIsRouteActive({ routeId }) - reactive, works in components
---
In many cases, we have components that are abstractions on the
<Link /> component, or have a function that is an abstraction on navigate that we want to utilise this system for determining whether or not to render the component, or whether the navigate function is going to work after calling it; since we know that if the route is disabled, it's obviously is going to get a 404 or custom error.
We originally implemented basic functionality for this using the routers routesByPath object, since this was pretty much just a case of passing the to prop to this and getting back the routeId. However, it soon became apparent when working with Links, that this wouldn't work, because you can use relative paths.
Now, I wouldn't consider the basic implementation of taking the from and merging it with the to, and then passing this to the routesByPath object to be a particular difficult task in general, but there is a lot of nuance in Tanstack router with the way things are handled internally.
1. What if someone passed a pre-interpolated string such as /service/123/overview?tooltip=true? This is handled by the router, and we end up in the right place when clicking the button, but I can't simply fix this myself (I am aware that the middleware would've caught it, but in some cases this is too late)
2. What if there are some syntaxes or changes in the future to what is acceptable to the to prop in the future? We'd have to go back through and update the functionality an unknown amount of times
3. This is pretty foundational code in the app given the nature of it, so messing it up is not an option
So given that Tanstack router already has the logic internally for taking any string (built or not) and correctly routing to the relevant route match (identifying the routeId in said process), is there any exported utility to go from NavigationOptions -> RouteId?
I am happy to accept that interpolated strings are not acceptable, since the types in the last 6 months have been updated to not allow raw strings to NavigationOptions, but I would really like to know if there is a predefined utility for this? I'd assume it's more like NavigationOptions -> RouteMatch or something along those lines.
Appreciate any answers to this 😃2 Replies
deep-jade•3mo ago
are you looking for router.matchRoutes() ?
xenial-blackOP•3mo ago
😂 Yes, it would look like this is what I want... I can't believe that I've been using the router daily for a year and have somehow just never thought to try this hook... Thankyou