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
@European anchovy 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?
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?
they receive the page props too
so they have access to searchParams
@Ray you could try parallel route
European anchovyOP
hmmm interesting I will look into that 😄
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
European anchovyOP
its not possible to have a parallel route conditionally rendered based on device width is there?
@European anchovy its not possible to have a parallel route conditionally rendered based on device width is there?
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 🙂