T
TanStack•7mo ago
deep-jade

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
future-harlequin
future-harlequin•7mo ago
are you using clerk?
deep-jade
deep-jadeOP•7mo ago
I'm not, however I resolved this by manually processing the data
rising-crimson
rising-crimson•7mo ago
if you have a reproducer example, please open a GitHub issue

Did you find this page helpful?