TanStackT
TanStack•13mo ago•
2 replies
slow-yellow

Two base-paths with each their own layout and outlets

Hey man, really trying to grasp what concept I am not getting here. I have the following file based routing structure:

routes
 - _root.tsx
 - index.tsx
 - _main.example.tsx
 | App
    -- index.tsx
    -- dashboard.tsx


My goal is to have the base route / render one layout, and all children under that in the index.tsx -> <Outlet />. If I go to the route/folder App I want a new layout, so app/index.tsx and all routes under that to be rendered in that files <Outlet />, e.g app/dashboard ==> app/dashboard.tsx rendered through outlet of app/index.tsx.

Currently all my root routes works, so anything at / and then _main.whatever.tsx is correctly rendered through the outlet of routes/index.tsx. If I go to app/index.tsx it renderes correctly, and I can also go to app/subroute but subroute is not rendered through app/index.tsx's <Outelet />.

I'm sure I'm doing something wrong, because it seems quite a trivial thing, but the documentation for some reason is not really able to enlighten me. Basically I just want to paths with each their own base layout.
Was this page helpful?