T
TanStack2y ago
like-gold

Param masking clears path

I've got a route that requires a path param e.g. path: 'dashboard/$userId. I also want to use masking to hide some information from the URL. When I navigate, If I do:
navigate({to: "/somepath", mask: { { search: {} } } })
navigate({to: "/somepath", mask: { { search: {} } } })
My URL changes to "/". What can I do to fix this?
8 Replies
inland-turquoise
inland-turquoise2y ago
can you please provide a minimal example on e.g. codesandbox?
like-gold
like-goldOP2y ago
https://codesandbox.io/p/devbox/friendly-shape-f5mdcr?file=%2Fsrc%2Fnavigation.tsx%3A17%2C11 helloRoute takes in a path param. I've got a navigate.tsx file that is a wrapper around the navigation methods the Router exposes so that I can have some shared logic regarding masking and maintaining certain features while navigating through my app. But while masking, information about the path gets lost. I'm not too sure how to retain it ah so the masking losing its path is independent of my troubles with the path params. You can ignore that stuff
inland-turquoise
inland-turquoise2y ago
you need to provide a to inside the mask prop the to is what router replaces the actual route with when masking
like-gold
like-goldOP2y ago
ah i see when masking, hash takes in a string, while every other property returns a function with prev. Is there a way for me to maintain hash, like how prev lets me maintain the value of a property?
inland-turquoise
inland-turquoise2y ago
hash also takes a update function
like-gold
like-goldOP2y ago
the update function can return undefined, which the mask property doesnt like. I'm currently doing: hash: (prev) => prev ?? '' is that fine?
inland-turquoise
inland-turquoise2y ago
looks good
like-gold
like-goldOP2y ago
awesome, thank you!

Did you find this page helpful?