Automated layout nesting always inheriting from root.tsx when overridden

[Mardoxx]

Reproduction

The use case here is, user wants pages to default to using a default layout. Alternatively certain pages should use their own defined template.

Reading https://remix.run/docs/en/main/file-conventions/routes#nested-urls-without-layout-nesting it seems you should be able to override the default layouts.

https://stackblitz.com/edit/remix-run-remix-jdvbmm?file=app%2Froutes%2F_auth.loginfoo_.tsx

If you go to /login or /loginfoo both still inherit from root.tsx

Perhaps I have misunderstood.

To conceptualise, imagine all pages to require a header, besides the login and about page -- without using a conditional rendering in the root.tsx template..

System Info

See stackblitz

Used Package Manager

npm

Expected Behavior

Not to use root.tsx on overridden layout.

Actual Behavior

Uses root.tsx on overridden layout.

[machour]

The behaviour you are seeing is the expected one. Perhaps a note should be added to the docs explaining that everything will be always nested under root.

The trick is to either switch the layout in root depending on the location (useLocation), or leave the root as simple as possible (make it only render the shared parts) and use pathless routes (the section right below the one you linked)

[topaxi]

I also ran into this, the docs seemed to be a bit misleading here. Our case is similar, where only a single page should opt out of the default layout, easy to handle within the root route via a route handle.