T
TanStack•10mo ago
eager-peach

URLSearchParams encodes spaces as +, breaking useSearch

I'm doing: 
const params = new URLSearchParams({
  test: "a b:
});
window.open(`${newPath}?${params}`, "_blank", "noopener,noreferrer");
const params = new URLSearchParams({
  test: "a b:
});
window.open(`${newPath}?${params}`, "_blank", "noopener,noreferrer");
The page opens with the search params as test=a+b 
export const Route = createFileRoute("/testroute")({
  validateSearch: (search: Record<string, string>) => {
    return {
      test: search.test
    };
  },
  component: () => {
    const { test } = Route.useSearch();

    console.log(test) // Doesnt convert + to space
export const Route = createFileRoute("/testroute")({
  validateSearch: (search: Record<string, string>) => {
    return {
      test: search.test
    };
  },
  component: () => {
    const { test } = Route.useSearch();

    console.log(test) // Doesnt convert + to space
At what point should I be converting the + to ? Should this be automatic?
3 Replies
multiple-amethyst
multiple-amethyst•10mo ago
are you using clerk?
eager-peach
eager-peachOP•10mo ago
I'm not, however I resolved this by manually processing the data
national-gold
national-gold•10mo ago
if you have a reproducer example, please open a GitHub issue

Did you find this page helpful?