How to retrieve query params in a layout.tsx file
Answered
British Shorthair posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
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.tsx
The
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!
![Image](https://cdn.discordapp.com/attachments/1198656338910257162/1198656339245813841/image.png?ex=65bfb2b5&is=65ad3db5&hm=1739ea3f896c239ec56eef171922ba1673f0cbe9e401cfa99e0762f4dab23a14&)
23 Replies
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
layout.tsx
does not receive searchParams. Could you fetch the data in page.tsx
instead?![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
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])
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
you could use parallel route for the sidebar
Answer
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
British ShorthairOP
How would the folder structure look like in that case?
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
where is your sidebar render?
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
British ShorthairOP
Inside the
(jobs)/jobs/layout.tsx
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
create it in
(jobs)/jobs/@sidebar/default.tsx
it will receive searchParams
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
British ShorthairOP
Interesting
Trying it
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
// (jobs)/jobs/layout.tsx
export default function Layout({children, sidebar}) {
return (
{sidebar}
{children}
)
}
then render it in the layout.tsx
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
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
![Image](https://cdn.discordapp.com/attachments/1198656338910257162/1198661188305821879/image.png?ex=65bfb739&is=65ad4239&hm=9dc41065f2a0512541921bfcc0e64f29a23405ecdb8d6b967ff7d621cde9e36b&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
restart the dev server
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
British ShorthairOP
Still the same
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
remove .next and restart again
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
British ShorthairOP
💥
Worked
I can also access the searchParams now!
You're a genius @Ray !
Thank you so much for the help
I appreciate
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
you're welcome