Accessing query param from multiple nested server components

Answered

European anchovy posted this in #help-forum

European anchovyOP

2024-04-02T12:46:27.000Z

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 }) {}

View full answer

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?

Ray

2024-04-02T12:47:36.000Z

currently it is only available from the props of the page component in server component

European anchovyOP

2024-04-02T12:50:10.000Z

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?

@European anchovy 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=...)

Ray

2024-04-02T12:50:43.000Z

you could try parallel route

they receive the page props too

so they have access to searchParams

@Ray you could try parallel route

European anchovyOP

2024-04-02T12:51:44.000Z

hmmm interesting I will look into that ðŸ˜„

Ray

2024-04-02T12:53:51.000Z

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 }) {}