Nested route but different layout

[anukool-loop]

hey, I am working on a cms
/dashboard anukool_dev !13 ?1

❯ ls                                                    ─╯
eslint.config.mjs  package.json        README.md
next.config.ts     package-lock.json   src
next-env.d.ts      postcss.config.mjs  tsconfig.json
node_modules       public

/dashboard anukool_dev !13 ?1 
❯ ls src/                                               ─╯
app  assets  Context  functionality  utils

/dashboard anukool_dev !13 ?1 
❯ ls src/app                                            ─╯
'(auth)'  '(dashboard)'   layout.tsx
 _common   globals.css

/dashboard anukool_dev !13 ?1 
❯ cd src/app                                            ─╯

/dashboard/s/app anukool_dev !13 ?1 
❯ ls '(dashboard)'                                      ─╯
 _Components  '(editor)'   layout.tsx   page.tsx

/dashboard/s/app anukool_dev !13 ?1 
❯ ls '(dashboard)'/'(editor)'                           ─╯
_component  editor  _functionality

/dashboard/s/app anukool_dev !13 ?1 
❯ ls '(dashboard)'/'(editor)'/editor                    ─╯
layout.tsx  page.tsx

I have achieved the different layout for dashboard ("/") and the auth ("/login"). but when It is coming to have a different layout inside the route of (dashboard) I failed. where the same layout is being followed and creating another layout inside the group directory is nesting the layout. any idea how can I have a different layout from its parent mean overriding its parent layout completely and have fresh layout.

[icyJoseph]

Do you mean that the src/app/layout.tsx - also known as Root Layout - is being shared across all route groups? You likely want to rename src/app/shared-root-layout.tsx, and then import the layout into src/app/(dashboard)/layout.tsx and compose it with the layout there. Same for other routes.

[icyJoseph]

If you have access to the tree command, maybe posting the output of that would be nice, but if I understand correctly, you need a another group starting from the root?

/src/app/(dashboard-variant)/dashboard/(editor)/ - something like that - I think you don't have an actual dashboard path but it is a bit hard to follow from the shared structure.

[anukool-loop]

leave that I tried differnt way to solve that, can you help me to know

that switching between two differnt layout using router.push("") method, placed in two routegroup causes a reload of the page
like :
src/app/
(dashboard)
(editor)

and switching from:
src/app/(dashboar)/
page.tsx
layout.tsx
to:
src/app/(editor)/
page.tsx
layout.tsx
would it clear logs and reload the whole web application, also does it re-initialize the contextAPI to its intialstate.

[icyJoseph]

Hi,

Right, this is documented in the caveats for route groups: https://nextjs.org/docs/app/api-reference/file-conventions/route-groups#caveats

I think one way out is to refactor, so that you can have a dummy root layout, or a root layout that can still adapt itself to the requirements of your route groups. And then each route group has its own level 1 layout sort of thing that does further work. The root layout, ought to have the html and body though.

[anukool-loop]

thanks, that helps. But tell me is there a way to handle save our contextAPI during the switching of route that causes reload?

[icyJoseph]

🤔 a little bit yeah, by persisting it to local or session storage, though I think you are also mixing up some React concepts. The correct way is to put this state you want to persist in shared layouts. And in your case it looks like you need to have one more level of depth in your route groups.