correct-apricot

router string search query with quotes

const searchParams = object({
  profile: optional(fallback(string(), ""), ""),
});

const user = {
  id: "1939488594",
  name: "John Doe"  
}

export const Route = createFileRoute("/messages/")({
  validateSearch: searchParams,
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <Button asChild>
<Link to="/messages" search={{profile: user.id}}>View Profile</Link>
</Button>

  );
}

const searchParams = object({
  profile: optional(fallback(string(), ""), ""),
});

const user = {
  id: "1939488594",
  name: "John Doe"  
}

export const Route = createFileRoute("/messages/")({
  validateSearch: searchParams,
  component: RouteComponent,
});

function RouteComponent() {
  return (
    <Button asChild>
<Link to="/messages" search={{profile: user.id}}>View Profile</Link>
</Button>

  );
}

when i click the url i get http://localhost:3000/messages?profile="1939488594" when i want http://localhost:3000/messages?profile=1939488594. how do i get this without the quotes?

4 Replies

robust-apricot•2mo ago

don't use a string then?

correct-apricotOP•2mo ago

it works differently. when i do this

export const JobsFilter = () => {
  const { tab } = Route.useSearch();
  return (
    <div>
      <Selector
        tabs={[
          { label: "All Jobs", value: "all" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
          { label: "Drafts", value: "drafts" },
        ]}
        url={Route.fullPath}
        activeTab={tab}
        className="max-w-md"
      />
    </div>
  );
};

export const JobsFilter = () => {
  const { tab } = Route.useSearch();
  return (
    <div>
      <Selector
        tabs={[
          { label: "All Jobs", value: "all" },
          { label: "Active", value: "active" },
          { label: "Archived", value: "archived" },
          { label: "Drafts", value: "drafts" },
        ]}
        url={Route.fullPath}
        activeTab={tab}
        className="max-w-md"
      />
    </div>
  );
};

the value of the tab which is a string doesnt have the quotes. so it works differently i get localhost/jobs?tab=all or localhost/jobs?tab=active

robust-apricot•2mo ago

well the number is treated as a string and in order to keep the type as a string it has quotes added

correct-apricotOP•2mo ago

okay. thank you so for the clarification. i get it now. i will use a number instead of a string then

Gaming

Programming

router string search query with quotes

Did you find this page helpful?