T
TanStack5d ago
rival-black

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
uncomfortable-black
uncomfortable-black5d ago
don't use a string then?
rival-black
rival-blackOP5d 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
uncomfortable-black
uncomfortable-black5d ago
well the number is treated as a string and in order to keep the type as a string it has quotes added
rival-black
rival-blackOP5d ago
okay. thank you so for the clarification. i get it now. i will use a number instead of a string then

Did you find this page helpful?