T
TanStack•7mo ago
genetic-orange

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
like-gold
like-gold•7mo ago
From : "."
genetic-orange
genetic-orangeOP•7mo ago
gives type error Type '"."' is not assignable to type ... but wait "to": "." seems to do the trick!!
like-gold
like-gold•7mo ago
Yeap, thats right check the docs In the docs they mentioned how to do it in search param section
genetic-orange
genetic-orangeOP•7mo ago
thank you

Did you find this page helpful?