Next.js Discord

Discord Forum

Getting `params` in `layout` shows {}

Answered
Red imported fire ant posted this in #help-forum
Open in Discord
Red imported fire antOP
I am trying to get the params in layout.tsx file. Folder structure is:

-app
  -(auth)
  -(sections)
     - dashboard/
     - goals/
     - layout.tsx
Answered by B33fb0n3
It does. You can regroup your routes like this:

* app
* (auth)
* (sections)
* (withnav) <- or any other name that's good
- dashboard/
- ...
- layout.tsx
* (withoutnav)
- goals/
- ...
View full answer

34 Replies

B33fb0n3
thanks! It looks like you are not using dynamics routes inside your folder structure
Dynamics routes looks like this:
app/blog/[slug]/page.js

I marked the part that you are missing in your folder structure
export default function Page({ params }) {
  return <div>My Post: {params.**slug**}</div>
}

After you changed your folder structure you can access it via the params
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Red imported fire antOP
I thought, in route group will work fine with layout
B33fb0n3
it does
app/blog/(group)/[slug]/page.js
My example would change to for example this ^
Red imported fire antOP
so it have to be dynamic route
B33fb0n3
The dynamic part stay the same
Red imported fire antOP
@B33fb0n3 sorry, but for (section) it has only dashboard and goals directory and layout file
B33fb0n3
ok?
Red imported fire antOP
I have to add [slug] directory to fix this?
@Red imported fire ant I have to add `[slug]` directory to fix this?
B33fb0n3
yes. The [slug] (thats the folder same) needs to be there. It can be anything between the brackets. So it can also be something like [id] or [blogId] or whatever
Red imported fire antOP
even, i dont need to use dynamic route?
B33fb0n3
you said you want to get "the params". What do you expect to see there? Normally that what you expect there is dynamic
Red imported fire antOP
ah, sorry, then like is there any way to get the route?, like for this example dashboard ?
B33fb0n3
the route? 🤔
What do you want to have in the end?
Red imported fire antOP
I want to conditional render the component in layout based on the route
B33fb0n3
ok, can you give me an example condition?
Red imported fire antOP
For example, i have this navbar in layout and want to hide this navbar on dashboard only
I thought checking the route would help me 😛
B33fb0n3
It does. You can regroup your routes like this:

* app
* (auth)
* (sections)
* (withnav) <- or any other name that's good
- dashboard/
- ...
- layout.tsx
* (withoutnav)
- goals/
- ...
Answer
Red imported fire antOP
I see, that can solve the issue
I felt like, it can be achieved same as when i used the jquery + css + html
B33fb0n3
you can't get the current route inside a server component. If one of my messages solved your issue, please mark it as solution: https://nextjs-forum.com/post/1164235068160614531#message-1164235076977033317
B33fb0n3
@Red imported fire ant well, that looks like none of my messages helped you and your current issue is still open. What else do you need to know, to resolve your issue?
Red imported fire antOP
@B33fb0n3 if i convert the layout with use client directive, is it helps?
what is the problem right now?
Red imported fire antOP
thing is i moving the component into other directory is not a option, so
B33fb0n3
why not? the routes stay the same
Red imported fire antOP
i was wondering any other way to achieve what i want
Red imported fire antOP
ok thanks for the help