Can a layout route be skipped for children routes under a folder?
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?
7 Replies
national-gold•2w ago
You could use non-nested routes
https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts#non-nested-routes
Routing Concepts | TanStack Router React Docs
TanStack Router supports a number of powerful routing concepts that allow you to build complex and dynamic routing systems with ease. Each of these concepts is useful and powerful, and we'll dive into...
wise-whiteOP•2w ago
@jokele 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
wise-whiteOP•2w ago
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?
I guess to better frame here the question, through the folder organization, is there a way to accomplish it?
national-gold•2w ago
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.tsxwise-whiteOP•2w ago
yeah, I'm aware, but that would be messy in terms of project structure
national-gold•2w ago
Yep, that's for sure
quickest-silver•2w ago
virtual file routes would be an option here