TanStack•9mo ago•

2 replies

primary-violet

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 />

<Link />

component, or have a function that is an abstraction on

navigate

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

routesByPath

object, since this was pretty much just a case of passing the

to

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

from

and merging it with the

to

to

, and then passing this to the

routesByPath

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

/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

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

NavigationOptions

RouteId

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

NavigationOptions

RouteMatch

RouteMatch

or something along those lines.

Appreciate any answers to this

TanStack•9mo ago•

2 replies

primary-violet

Convert NavigationOptions -> RouteId

<Link />

<Link />

component, or have a function that is an abstraction on

navigate

navigate

routesByPath

routesByPath

object, since this was pretty much just a case of passing the

to

to

from

from

and merging it with the

to

to

, and then passing this to the

routesByPath

routesByPath

/service/123/overview?tooltip=true

/service/123/overview?tooltip=true

to

to

NavigationOptions

NavigationOptions

RouteId

RouteId

NavigationOptions

NavigationOptions

RouteMatch

RouteMatch

or something along those lines.

Appreciate any answers to this

Convert NavigationOptions -> RouteId

Convert NavigationOptions -> RouteId

Similar Threads

Similar Threads

Similar Threads