How to retrieve query params in a layout.tsx file
Answered
British Shorthair posted this in #help-forum
British ShorthairOP
First of all, here's my current app dir structure
The
In the
To filter out jobs, I must access those query params in the
I tried adding an api call to a route handler to the layout file but got this error:
Is this the way to go to implement this feature? Please help me out with clarity and guidance.
Please feel free to ask questions for more context. Thanks!
app
|__ (jobs)
|__ layout.tsx
|__ jobs/
|__ layout.tsx
|__ page.tsx
|__ [id]/
|__ page.tsxThe
jobs group has a layout that has a top bar that contains a filter input and inside the jobs folder, I have another layout where I am fetching all the jobs that need to be filtered based on the criteria that were set through the prior layout.In the
app/(jobs)/layout.tsx file, I have a layout that contains a filter input that mutates the query parameters in the /jobs route path. Such as /jobs?category=full_time&salary=50+ or /jobs/[jobId]?category=full_time&salary=50+To filter out jobs, I must access those query params in the
app/(jobs)/jobs/layout.tsx file. I tried adding an api call to a route handler to the layout file but got this error:
Error: connect ECONNREFUSED ::1:80
jobseeker:dev: at RedirectableRequest.emit (node:events:514:28)
jobseeker:dev: at ClientRequest.emit (node:events:514:28)
jobseeker:dev: at Socket.socketErrorListener (node:_http_client:501:9)
jobseeker:dev: at Socket.emit (node:events:514:28)
jobseeker:dev: digest: "505303072"Is this the way to go to implement this feature? Please help me out with clarity and guidance.
Please feel free to ask questions for more context. Thanks!
23 Replies
Ray
layout.tsx does not receive searchParams. Could you fetch the data in page.tsx instead?British ShorthairOP
I need it in the layout.tsx file
Because the sidebar will show all the jobs that will stick beside (/jobs/layout.tsx) the job details page (/jobs/[id])
Ray
you could use parallel route for the sidebar
Answer
British ShorthairOP
How would the folder structure look like in that case?
Ray
where is your sidebar render?
British ShorthairOP
Inside the
(jobs)/jobs/layout.tsxRay
create it in
(jobs)/jobs/@sidebar/default.tsxit will receive searchParams
British ShorthairOP
Interesting
Trying it
Ray
// (jobs)/jobs/layout.tsx
export default function Layout({children, sidebar}) {
return (
{sidebar}
{children}
)
}then render it in the layout.tsx
British ShorthairOP
// (jobs)\jobs\@sidebar\default.tsx
import JobsList from "@/components/jobs/List.server";
export default function JobsListSideBar() {
return (
<div>
<JobsList />
</div>
);
}// (jobs)\jobs\layout.tsx
export default async function JobsRootPageLayout(
props: AppProps & { sidebar: ReactNode },
) {
const { children, sidebar } = props;
console.log({ sidebar, children });
return (
<div className="flex h-full w-full items-center justify-center">
<aside className="flex h-full w-full max-w-[350px] flex-col border-r bg-white">
<div className="h-full w-full overflow-x-hidden">{sidebar}</div>
<div className="h-full w-full flex-1 overflow-x-hidden p-4">
{children}
</div>
</div>
);
}Getting
undefined while logging out the sidebar
Ray
restart the dev server
British ShorthairOP
Still the same
Ray
remove .next and restart again
British ShorthairOP
💥
Worked
I can also access the searchParams now!
You're a genius @Ray !
Thank you so much for the help
I appreciate
Ray
you're welcome