Accessing query param from multiple nested server components
Answered
European anchovy posted this in #help-forum
European anchovyOP
This might be a naive question but is there a way of accessing query params (via searchParams) in server components without having to prop drill them?
Answered by Ray
something like this
// app/users/layout.tsx
export default function Layout({children, top, bottom}) {
return (
<>
{top}
{children}
{bottom}
</>
)
}
// app/users/@top/default.tsx
export default function Default({ searchParams}) {}
// app/users/@bottom/default.tsx
export default function Default({ searchParams}) {}
// app/users/page.tsx
export default function Page({ searchParams }) {}14 Replies
Ray
currently it is only available from the props of the page component in server component
European anchovyOP
Hmm because I am planning on having several server components whose data fetching may depend on query params (which will be a date range, like start=...&from=...)
Would I have to pass that as props to every component?
Ray
you could try parallel route
they receive the page props too
so they have access to searchParams
European anchovyOP
hmmm interesting I will look into that 😄
Ray
something like this
// app/users/layout.tsx
export default function Layout({children, top, bottom}) {
return (
<>
{top}
{children}
{bottom}
</>
)
}
// app/users/@top/default.tsx
export default function Default({ searchParams}) {}
// app/users/@bottom/default.tsx
export default function Default({ searchParams}) {}
// app/users/page.tsx
export default function Page({ searchParams }) {}Answer
Barbary Lion
Use this
European anchovyOP
its not possible to have a parallel route conditionally rendered based on device width is there?
Ray
device width is unknown when rendering on server, you would need to render on client.
css isn't enough for you use case?
European anchovyOP
im just brainstorming, will it a go with css 🙂