#Can a layout route be skipped for children routes under a folder?

7 messages · Page 1 of 1 (latest)

ember kelp
#

I’m trying to set up a route tree where most routes inside a section use a layout, but certain deep nested routes inside that same section must opt out of that layout.

🔧 Structure I’m trying to achieve
/app
/portal # Authenticated area — provides the main layout (sidebar, nav)
/home # Uses portal layout
/projects # Uses portal layout
/$projectId # Uses portal layout
/edit # ❌ Should NOT use portal layout
/activity # Uses portal layout

💡 Goal / Intent

/app/portal/* normally shares a layout (sidebar + top nav).

But a specific nested route (/projects/$projectId/edit) should not render inside that layout.

Basically:

/portal/** → ✔️ uses layout

/portal/projects/$id/edit → ❌ bypasses layout entirely

❗The issue

Even when I move the edit route into its own folder, TanStack still loads the portal layout because it’s the parent route in the tree.

Question:
Is it possible in TanStack Router to create a route subtree like the above where a child route opts out of its parent layout?

If so, what would be the correct folder/route setup to make /edit completely bypass the /portal layout while still living inside the /portal/projects/$projectId path segment? but keeping a nice organization in the project?

rough coyote
ember kelp
#

@rough coyote thank you for that, but it didnt work. I tried the following (i changed the token route-> layout for better dev ux, so just ignore). Both stlll showing portal layout

image.png image.png image.png
#

through the flat system I know we are capable of doing that and I would need to turn portal.tsx and then every subsquent route would use "portal." as prefix, and whenever I wouldn't need a layout being rendered I would I just needed to add "portal_" (that would ignore the layout).

I guess to better frame here the question, through the folder organization, is there a way to accomplish it?

rough coyote
#

I can't test it myself yet, but I think edit.tsx has to be outside of /portal and named as portal_.projects_.$id.edits.tsx

ember kelp
#

yeah, I'm aware, but that would be messy in terms of project structure

rough coyote
#

Yep, that's for sure