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?

TanStack•11mo ago•

6 replies

living-lavender

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 ...

Setting global search params

Similar Threads

Setting global search params

Similar Threads

Similar Threads

Similar Threads