Link with search param having multiple values for same key

I'd like to provide a search property to my Link component where they query string key can have multiple values (an array)

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

This does work, but the query string in the browser is shown like this:

?group_by=%5B"foo"%2C"bar"%5D

?group_by=%5B"foo"%2C"bar"%5D

It does work technically. But I'd like it to be:

?group_by=foo&group_by=bar

?group_by=foo&group_by=bar

but I don't know how to make that happen. If I try to set the query string to the to property

<Link to="/foo/bar?group_by=foo&group_by=bar" ...>

<Link to="/foo/bar?group_by=foo&group_by=bar" ...>

I get a type error that the route is not any of those I've defined in my router config.

My current route definition is as follows:

const GroupByEnum = z.enum([
  'type', 'size', 'height'
]);

const routeValidator = z.object({
  group_by: z.union([z.array(GroupByEnum), GroupByEnum]) // Accepts array or single value
});

export const Route = createFileRoute('/report')({
  validateSearch: zodSearchValidator(routeValidator),
});

const GroupByEnum = z.enum([
  'type', 'size', 'height'
]);

const routeValidator = z.object({
  group_by: z.union([z.array(GroupByEnum), GroupByEnum]) // Accepts array or single value
});

export const Route = createFileRoute('/report')({
  validateSearch: zodSearchValidator(routeValidator),
});

TanStack•16mo ago•

14 replies

few-sapphire

Link with search param having multiple values for same key

I'd like to provide a search property to my Link component where they query string key can have multiple values (an array)

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

<Link to="/foo/bar" search={{group_by: ['foo', 'bar']}} ...>

This does work, but the query string in the browser is shown like this:

?group_by=%5B"foo"%2C"bar"%5D

?group_by=%5B"foo"%2C"bar"%5D

It does work technically. But I'd like it to be:

?group_by=foo&group_by=bar

?group_by=foo&group_by=bar

but I don't know how to make that happen. If I try to set the query string to the to property

<Link to="/foo/bar?group_by=foo&group_by=bar" ...>

<Link to="/foo/bar?group_by=foo&group_by=bar" ...>

I get a type error that the route is not any of those I've defined in my router config.

My current route definition is as follows:

const GroupByEnum = z.enum([
  'type', 'size', 'height'
]);

const routeValidator = z.object({
  group_by: z.union([z.array(GroupByEnum), GroupByEnum]) // Accepts array or single value
});

export const Route = createFileRoute('/report')({
  validateSearch: zodSearchValidator(routeValidator),
});

const GroupByEnum = z.enum([
  'type', 'size', 'height'
]);

const routeValidator = z.object({
  group_by: z.union([z.array(GroupByEnum), GroupByEnum]) // Accepts array or single value
});

export const Route = createFileRoute('/report')({
  validateSearch: zodSearchValidator(routeValidator),
});

Link with search param having multiple values for same key

Similar Threads

Link with search param having multiple values for same key

Similar Threads

Similar Threads

Similar Threads