Next.js Discord

Discord Forum

Root layout affect route group

Answered
Yafi posted this in #help-forum
Open in Discord
YafiOP
I create a root layout app/layout.tsx which is contain header and footer, then i create route group named (dashboard) and create a new layout for this group. but, the root layout still affecting the route group. isn't supposed to not affecting?

so for root page '/' app/page.tsx should be affect by app/layout.tsx and for dashboard page app/(dashboard)/dashboard/page.tsxshould only affect by (dashboard)/layout.tsx but this root layout still affect the dashboard page
here is the current structure
Answered by West African Lion
@Yafi, I understand what's happening here, you can’t solve this problem that way because, when rendered, the routes will appear like this.
Root Layout
  └─ Root Page
  └─ Dashboard Layout
      └─ Dashboard Page

That means the Root Layout would wrap your Dashboard layout. You can solve this by implementing different layouts at the same level, not at the root level.
app/
  (main)/
    layout.tsx   
    page.tsx            
  (dashboard)/dashboard
    layout.tsx          
    page.tsx
View full answer

2 Replies

West African Lion
@Yafi, I understand what's happening here, you can’t solve this problem that way because, when rendered, the routes will appear like this.
Root Layout
  └─ Root Page
  └─ Dashboard Layout
      └─ Dashboard Page

That means the Root Layout would wrap your Dashboard layout. You can solve this by implementing different layouts at the same level, not at the root level.
app/
  (main)/
    layout.tsx   
    page.tsx            
  (dashboard)/dashboard
    layout.tsx          
    page.tsx
Answer
YafiOP
I see, thanks man you're saver. It's fixed with yours answer