Can I use useNavigate to convert search params into ampersand? e.g. filter=apple&filter=orange instead of filter=apple%2Corange?

[starxyn]

import { useNavigate } from '@tanstack/react-router';

const basket = {
  type: "fruits",
  filter: ["sour, sweet"],
};
 navigate({
   to: '/abcmart',
   params: {
     abc       
   },
   search: {
     type: type,
     filter: filter,
    },
   });
}

note: tanstack router version is 1.26.1
but this doesn't work. it just auto converts to http://abcmart?type=type&filter=sour%2Csweet. All I wanted is http://abcmart?type=type&filter=sour&filter=sweet. i tried other string manipulation method it also auto converts to other kind of weird query string. what can I do?

[schiller-manuel]

yes this can be done using Custom Search Param Serialization. checkout the section about the query-string library

https://tanstack.com/router/v1/docs/framework/react/guide/custom-search-param-serialization#using-the-query-string-library

[schiller-manuel]

this setup works:

const router = createRouter({
  routeTree,
  defaultPreload: 'intent',
  stringifySearch: (value) => {
    const searchStr = qs.stringify(value);
    return searchStr ? `?${searchStr}` : '';
  },
  parseSearch: qs.parse,
});

see full example: https://stackblitz.com/edit/tanstack-router-wewitc?file=src%2Fmain.tsx,src%2Froutes%2Findex.tsx&preset=node

[starxyn]

So this means that using useNavigate will not work, but using Link will work?

[starxyn]

But I have to use useNavigate because I'm not using an button click event to direct to a website. useNavigate is part of a backend logic to automatically direct to a website.

[schiller-manuel]

useNavigate and Link share the same API, so if you change the search param validation it affects both

[starxyn]

thank you!