how to navigate to a route that has search params with default values?

I have the following route:

const searchSchema = z.object({
  page: z.number().catch(1),
  filter: z.string().catch(""),
});

const route = new Route({
  getParentRoute: () => rootRoute,
  path: "/route",
  validateSearch: searchSchema
  }),
  component: RouteComponent
});

const searchSchema = z.object({
  page: z.number().catch(1),
  filter: z.string().catch(""),
});

const route = new Route({
  getParentRoute: () => rootRoute,
  path: "/route",
  validateSearch: searchSchema
  }),
  component: RouteComponent
});

How would I navigate to this route without specifying the search params?

Ideally I could just do this:

navigate({
    to: '/route1'
})

navigate({
    to: '/route1'
})

I can omit the search params if I use the following zod schema and declare them all to be optional:

const searchSchema = z.object({
  page: z.number().optional().catch(1),
  filter: z.string().optional().catch(""),
});

const searchSchema = z.object({
  page: z.number().optional().catch(1),
  filter: z.string().optional().catch(""),
});

However, now the search params types include

undefined

undefined

{
    page?: number | undefined;
    filter?: string | undefined;
}

{
    page?: number | undefined;
    filter?: string | undefined;
}

But they are never undefined at runtime ...

TanStack•3y ago•

42 replies

still-lime

how to navigate to a route that has search params with default values?

I have the following route:

const searchSchema = z.object({
  page: z.number().catch(1),
  filter: z.string().catch(""),
});

const route = new Route({
  getParentRoute: () => rootRoute,
  path: "/route",
  validateSearch: searchSchema
  }),
  component: RouteComponent
});

const searchSchema = z.object({
  page: z.number().catch(1),
  filter: z.string().catch(""),
});

const route = new Route({
  getParentRoute: () => rootRoute,
  path: "/route",
  validateSearch: searchSchema
  }),
  component: RouteComponent
});

How would I navigate to this route without specifying the search params?

Ideally I could just do this:

navigate({
    to: '/route1'
})

navigate({
    to: '/route1'
})

I can omit the search params if I use the following zod schema and declare them all to be optional:

const searchSchema = z.object({
  page: z.number().optional().catch(1),
  filter: z.string().optional().catch(""),
});

const searchSchema = z.object({
  page: z.number().optional().catch(1),
  filter: z.string().optional().catch(""),
});

However, now the search params types include

undefined

undefined

{
    page?: number | undefined;
    filter?: string | undefined;
}

{
    page?: number | undefined;
    filter?: string | undefined;
}

But they are never undefined at runtime ...

how to navigate to a route that has search params with default values?

Similar Threads

how to navigate to a route that has search params with default values?

Similar Threads

Similar Threads

Similar Threads