searchParams
Answered
American black bear posted this in #help-forum
American black bearOP
i simply wanted to read some url searchParams in my root index page and im getting the params like this
i dont get it
how am i supposed to read the url params
export default async function ProductList({
searchParams,
}: {
searchParams: Promise<{ type?: "gpu" | "cpu" | "cpu" }>;
}) {
const { type = "gpu" } = await searchParams;
return <div> type is {type}</div>;
}i dont get it
how am i supposed to read the url params
Answered by Asian black bear
Only pages receive the searchParams. Not custom conponents. That is not possible
20 Replies
what is the error you're getting?
American black bearOP
TypeError: Cannot read properties of undefined (reading 'type')says its undefined
Asian black bear
You can’t destructure an await expression
Split it in two lines
@Asian black bear You can’t destructure an await expression
American black bearOP
didnt work
but thanks anyways
but thanks anyways
Asian black bear
Share the code you tried using my instructions
American black bearOP
did you mean smt like this
const parameters = await searchParams;
const { type = "gpu" } = parameters;
const parameters = await searchParams;
const { type = "gpu" } = parameters;
maybe i should pass the searchParams as an object not a promise
Asian black bear
Don’t use destructuring at all and attempt to just use optional chaining and nullish coalescing.
parameters?.type ?? “gpu”
American black bearOP
i tryed logging the parameters object itself
and its undefined
and its undefined
Asian black bear
And what is the Url? Do you even have search params in it?
@Asian black bear parameters?.type ?? “gpu”
American black bearOP
that just sets it to "gpu"
@Asian black bear And what is the Url? Do you even have search params in it?
American black bearOP
http://localhost:3000/?type=cpu
like this right?
like this right?
Asian black bear
Is ProductList in a page.tsx as THE page or just a custom component
American black bearOP
its just a custom component
Asian black bear
Then it wont work
American black bearOP
wait dont tell me only the page.tsx files gets the params
Asian black bear
Only pages receive the searchParams. Not custom conponents. That is not possible
Answer
@Asian black bear Only pages receive the searchParams. Not custom conponents. That is not possible
American black bearOP
thanks so much i was about to make this a client component
you saved this from become a web "application"
you saved this from become a web "application"