Next.js Discord

Discord Forum

opt out of layout for a nested route

Unanswered
Satin Angora posted this in #help-forum
Open in Discord
Satin AngoraOP
I have multiple dynamic routes that all should have same layout (sidebar). I put that layout in the root route so that they can inherit the layout. But I have one particular route in the which shouldn't have that layout (sidebar), it should pan out the whole screen. Is there a simpler/easier way to do this while also retaining the layout in the route route.

/layout.tsx
/[workspaceId]/projects/page.tsx
/[workspaceId]/projects/[projectId]/page.tsxt
/[workspaceId]/tasks/page.tsx
/[workspaceId]/tasks/[taskId]/page.tsx


frist 3 routes should have sidebar layout but the last one shouldn't

4 Replies

Satin AngoraOP
I think I can use route groups and useLayoutSegments to conditionally not render the sidebar if it matches the segment path of the task!
For example

I added a path

/[workspaceId]/tasks/(overview)/page.tsx
/[workspaceId]/tasks/(task)/[taskId]/page.tsx


and then the useLayoutSegments would return (task) (along with other segments) if I'm on a task page.

I don't know if this is hacky way or the proper way to do it. Posting here for posterity. let me know if there's a better way!
alfon
/(withsidebar)/layout.tsx
/(withsidebar)/[workspaceId]/projects/page.tsx
/(withsidebar)/[workspaceId]/projects/[projectId]/page.tsx
/(nosidebar)/layout.tsx
/(nosidebar)/[workspaceId]/tasks/page.tsx
/(nosidebar)/[workspaceId]/tasks/[taskId]/page.tsx
that is if you want to keep using layout.tsx to employ different common layouts.
Otherwise, using useSelectedLayoutSegments() to divide the two conditionally is also viable. Its not hacky if it comes from a Next.js hook :)