unwilling-turquoise

mask search params on all routes

How can I mask search params on all routes? I've tried:

const searchParamsRouteMask = createRouteMask({
  routeTree,
  params: () => ({}),
});

export const router = new Router({
  routeTree,
  routeMasks: [searchParamsRouteMask],
});

const searchParamsRouteMask = createRouteMask({
  routeTree,
  params: () => ({}),
});

export const router = new Router({
  routeTree,
  routeMasks: [searchParamsRouteMask],
});

This masks the search params on all routes, but introduces a lag in updating the URL when navigating between routes, where the URL will always be 1 click behind the current navigation. Visually everything appears fine. I've got a reproduction here: https://codesandbox.io/p/devbox/stoic-cerf-qj7jyh

11 Replies

afraid-scarlet•2y ago

"Visually everything appears fine." so what does not work as expected?

unwilling-turquoiseOP•2y ago

the URL itself lags. If you navigate to any of the routes, the URL will display the previous route Inside the app itself, everything appears fine visually. Navigating between routes seems fine. So does using search params

afraid-scarlet•2y ago

unwilling-turquoiseOP•2y ago

yeah i wasnt super sure if I used the route mask correctly for my need, as the docs weren't super clear how I could apply them in this way not sure if this is a me thing, or an issue with the router for this use case

afraid-scarlet•2y ago

unfortunately I don't have many insights either, hopefully @Tanner Linsley can have a look here

unwilling-turquoiseOP•2y ago

I saw that there was a release yesterday with some fixes to do with masking. Seems like this issue is still persistent on the latest version of TSR, though. Anything I can do about this?

afraid-scarlet•2y ago

the latest masking fix was not related to this issue. I don't even know if you what you want to do (i.e. masking ALL routes) is possible in the current state

unwilling-turquoiseOP•2y ago

oh i see. I just tried manually declaring route masks for each route, and it seems to work fine, with no lag:

const homeSearchParamsRouteMask = createRouteMask({
  routeTree,
  from: "/",
  to: "/",
  params: () => ({}),
});

const aboutSearchParamsRouteMask = createRouteMask({
  routeTree,
  from: "/about",
  to: "/about",
  params: () => ({}),
});

export const router = new Router({
  routeTree,
  routeMasks: [homeSearchParamsRouteMask, aboutSearchParamsRouteMask],
});

const homeSearchParamsRouteMask = createRouteMask({
  routeTree,
  from: "/",
  to: "/",
  params: () => ({}),
});

const aboutSearchParamsRouteMask = createRouteMask({
  routeTree,
  from: "/about",
  to: "/about",
  params: () => ({}),
});

export const router = new Router({
  routeTree,
  routeMasks: [homeSearchParamsRouteMask, aboutSearchParamsRouteMask],
});

I wonder if would be possible to provide the ability to do this at a global level?

afraid-scarlet•2y ago

This would require some wildcard mechanism I guess maybe you can also create a custom history implementation that hides the search params?

unwilling-turquoiseOP•2y ago

have a component that reads the search params, has a useEffect depending on it, and then hides it every time the value of search params change? That wouldn't affect TSR's ability to read the params right?

afraid-scarlet•2y ago

hiding would mean you would navigate "away" to remove the search params, and then they are gone maybe you can abuse the search param serialization? https://codesandbox.io/p/devbox/agitated-cherry-znx5tx?file=%2Fsrc%2Froutes.tsx%3A51%2C7&workspaceId=04406bc7-9c73-4451-92ef-24aa90aec666 but that's really... just hacky and probably does not work

Gaming

Programming

mask search params on all routes

Did you find this page helpful?