Different layouts in nested routes without nesting layouts
Answered
Asian black bear posted this in #help-forum
Asian black bearOP
I have this structure:
What I'm looking to do is add a new layout to the
The use case here is that both routes should have their own unique sidebar elements but keep the same general shell.
Is this possible to do at a route level, or do I need to resort to client components reading the params and switching what it renders accordingly?
app/
├── (dashboard)/
│ └── layout.tsx
│ └── page.tsx
├── organization/
│ ├── [organizationId]/
│ │ ├── page.tsx
│ │ ├── layout.tsx
│ │ └── [workspaceId]/
│ │ └── page.tsx
└── layout.tsx (root layout)What I'm looking to do is add a new layout to the
[workspaceId] route, that is independent from the [organizationId] route, it should not be nested.The use case here is that both routes should have their own unique sidebar elements but keep the same general shell.
Is this possible to do at a route level, or do I need to resort to client components reading the params and switching what it renders accordingly?
Answered by B33fb0n3
you can use [parallel routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#conditional-routes) for it. Add a slot with your sidebar items, put it inside your layout and it will automatically render the correct items, depending on your route
6 Replies
@Asian black bear I have this structure:
app/
├── (dashboard)/
│ └── layout.tsx
│ └── page.tsx
├── organization/
│ ├── [organizationId]/
│ │ ├── page.tsx
│ │ ├── layout.tsx
│ │ └── [workspaceId]/
│ │ └── page.tsx
└── layout.tsx (root layout)
What I'm looking to do is add a new layout to the `[workspaceId]` route, that is independent from the `[organizationId]` route, it should not be nested.
The use case here is that both routes should have their own unique sidebar elements but keep the same general shell.
Is this possible to do at a route level, or do I need to resort to client components reading the params and switching what it renders accordingly?
you can use [parallel routes](https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#conditional-routes) for it. Add a slot with your sidebar items, put it inside your layout and it will automatically render the correct items, depending on your route
Answer
@Asian black bear solved?
Asian black bearOP
sorry got really busy and completely forgot.
i couldn't get parallel routes working and ended up just reading which params are populated in a client component and switching component based on that
i couldn't get parallel routes working and ended up just reading which params are populated in a client component and switching component based on that
i've seen people mention parallel/intercepting routing can be a bit of a pain so im sure im just doing something wrong on my end, thanks for the help though
I achieved this with route groups instead of parallel routes. This meant my top-level layout.tsx was very very basic (but still nested, sorry), merely taking care of boilerplate metadata and instruments