Best way to preserve "global" search params when switching routes

[nilshartmann]

Hi,

I have some search params that have a global-ish meaning (imagine something like a theme setting or a session id). Is there a way to (automatically) add this params to all links that are rendered in my app? Or at least on links that point to a specific subtree in my route tree?

Thanks,
Nils

[ashishsurya]

I think we can do that using zod library, by defining the default values and using zod's parse function for parsing the seach params passed at the run time

Not sure if this works in production, or not sure of any tradeoffs.

const rootSearchParams = z.object({
  start: z.string().default(""),
  timeFrame: z.string().default("Last 15 Minutes"),
});

export const Route = createRootRoute({
  component: () => (
    <>
      <span>
        <Link to={"/"}>To Index</Link>
        <Link to={"/about"}>
          To About
        </Link>
      </span>
      <Outlet />
      <TanStackRouterDevtools />
    </>
  ),
  onEnter: () => console.log("ROOT ROUTE"),
  validateSearch: rootSearchParams,
});

[nilshartmann]

Hi @ashishsurya ,

I tried your approach, but the search params are not added to any url when using the Link component without explicitly settings them.

[ashishsurya]

Yeah you want to pass search params if they are configured

[nilshartmann]

It would be nice if it would be possible to mark search params as "global" so that they are automatically added when the Link components renders an a element (and everywhere else a URL is generated by TS Router).

I think this would align the search params even more with the idea that search params a replacement for global state. Using global state I also don't have to add props for any new component I render.

[michaeltnguyen]

This is now supported via retainSearchParams middleware.

https://tanstack.com/router/latest/docs/framework/react/api/router/retainSearchParamsFunction