harsh-harlequin

Setting global search params

Hi, so I have this setup

export const rootRoute = createRootRoute({
  component: Root,
  notFoundComponent: NotFound,
  validateSearch: z.object({
    support: z.boolean().optional(),
  }),
});

export const rootRoute = createRootRoute({
  component: Root,
  notFoundComponent: NotFound,
  validateSearch: z.object({
    support: z.boolean().optional(),
  }),
});

and then in Root component I have this logic:

const { search } = useLocation();
...
<SupportDialog open={search.support} onClose={onDialogClose} /> // dialog that I want to be able to open from anywhere

const { search } = useLocation();
...
<SupportDialog open={search.support} onClose={onDialogClose} /> // dialog that I want to be able to open from anywhere

which works fine however when I try to set this search from somewhere I get a type error

const navigate = useNavigate();

navigate({ search: { support: true } }) // Object literal may only specify known properties ...

const navigate = useNavigate();

navigate({ search: { support: true } }) // Object literal may only specify known properties ...

as far as I understand I have to either provide "to" or "from" to navigate but I dont want to change the route I want to show the dialog on top of current page (and I dont know how to get "from" either). How can I do this properly?

4 Replies

fascinating-indigo•4mo ago

From : "."

harsh-harlequinOP•4mo ago

gives type error Type '"."' is not assignable to type ... but wait "to": "." seems to do the trick!!

fascinating-indigo•4mo ago

Yeap, thats right check the docs In the docs they mentioned how to do it in search param section

harsh-harlequinOP•4mo ago

thank you

Gaming

Programming

Setting global search params

Did you find this page helpful?