Is it possible to filter the route param with Tanstack Router?
I have several types of interfaces:
- for /@{user} I need to show user profile page
- for other (/, /game, /trends, /movie, ...) paths as /{section} I need to show section info page
How can I do it?
27 Replies
equal-aquaβ’13mo ago
what does "filter" mean? please explain in more detail
correct-apricotOPβ’13mo ago
May be it is not correct word. I mean validate param value for the pattern match.
paths as /@aaa, /@bbb, /@ccc and similar must show one page
equal-aquaβ’13mo ago
a prefix?
we don't have that yet
correct-apricotOPβ’13mo ago
yes!
equal-aquaβ’13mo ago
was requested a few times
correct-apricotOPβ’13mo ago
π¦
Π‘an it be done by some kind of plugin or middleware maybe?
Or check the parameter using a regular expression and if it fits, then show the component, and if not, then look for a new route further?
equal-aquaβ’13mo ago
you could read this
https://discord.com/channels/719702312431386674/1272111729366798336/1272113119141036045
@enheit wanted to implement that
but we were stuck when it came to suffixes
so I guess we could drop suffixes and only do prefixes
correct-apricotOPβ’13mo ago
prefix is enough for me π
is it not known when it will be implemented?
equal-aquaβ’13mo ago
nope
maybe @enheit has a plan for this
generous-apricotβ’13mo ago
Yes, I wanted to implement that, but I got stuck deciding how to support suffixes and prefixes without introducing breaking changes since there were no strict rules on route path dynamic segments.
I can't confidently say that I'll implement this in the near future because I've decided not to spend too much time on it and to continue using what we have at the moment.
If I find the time and desire to contribute in the near future, I'll open a PR. But if anyone is willing to work on it right now, feel free to contribute.
equal-aquaβ’13mo ago
maybe dropping suffixes is the right choice here
correct-apricotOPβ’13mo ago
or add matcher function to params option π
equal-aquaβ’13mo ago
if you are interested in implementing any of this, let me know so we could discuss details
correct-apricotOPβ’13mo ago
I think to do something like this
GitHub
Comparing TanStack:main...KleinMaximus:main Β· TanStack/router
π€ Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - Comparing TanStack:main...KleinMaximus:ma...
equal-aquaβ’13mo ago
but this would still give you "@foo" as the path param
and not remove the prefix
correct-apricotOPβ’13mo ago
this can be used in conjunction with parse and stringify
equal-aquaβ’13mo ago
hm not in a typesafe way I think
correct-apricotOPβ’13mo ago
why?
equal-aquaβ’13mo ago
just a gut feeling π
but happy to be proven wrong
correct-apricotOPβ’13mo ago
we can use this feature not only for suffix or prefix
it can be simple filter
π
for example in one case we need number params and string in another
for different routes and different target components
of course it can be done in component directly
not a completely correct example π¦
maybe the prefix can be implemented using masking?
correct-apricotOPβ’13mo ago
Route Masking | TanStack Router React Docs
Route masking is a way to mask the actual URL of a route that gets persisted to the browser's history and URL bar. This is useful for scenarios where you want to show a different URL than the one that is actually being navigated to and then falling back to the displayed URL when it is shared and (optionally) when the page is reloaded. Here's a ...
wise-whiteβ’11mo ago
Or maybe this could be only supported via virtual routes for those that need more complex
matchers? π€ In my case, at least at the moment, I'd "only" need the @ prefix like @[username] or @$username, maybe via custom regex π€·ββοΈ tho not sure about types π¬equal-aquaβ’11mo ago
what does this have to do with virtual routes?
wise-whiteβ’11mo ago
My thought was that maybe this more complex matching, be it a prefix or suffix, could be somehow supported via
defineVirtualSubtreeConfig instead of trying to support it in file paths, maybe that could make it somewhat simpler, tho I might misunderstand something here π
equal-aquaβ’11mo ago
hm no, virtual routes (currently) only are a way to map your arbitrarily named files to routes
but the route specification itself does not change
wise-whiteβ’11mo ago
uh I see so it would need to be supported in file routes as well or virtual routes would have to be extended somehow I guess
equal-aquaβ’11mo ago
yes