T
TanStack•8mo ago
absent-sapphire

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
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.
2 Replies
sunny-green
sunny-green•8mo ago
index.tsx would signal a leaf in the tree of potential matches for the route. There would be no more potential nested routes beneath it. If you want to nest certain logic, you would be looking for a route.tsx file. https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#file-naming-conventions 
- __route.tsx
- index.tsx (Inherits the <Outlet> from __root   Path: /)

-- app
  - route.tsx (Inherits the <Outlet> from __root and creates a nested layout for all leaves beneath the /app route)
  - index.tsx (Inherits the <Outlet> from __root and app.route.tsx   Path: /app)
  - dashboard.tsx (Inherits the <Outlet> from __root and app.route.tsx   Path: /app/dashboard)
- __route.tsx
- index.tsx (Inherits the <Outlet> from __root   Path: /)

-- app
  - route.tsx (Inherits the <Outlet> from __root and creates a nested layout for all leaves beneath the /app route)
  - index.tsx (Inherits the <Outlet> from __root and app.route.tsx   Path: /app)
  - dashboard.tsx (Inherits the <Outlet> from __root and app.route.tsx   Path: /app/dashboard)
File-Based Routing | TanStack Router React Docs
Most of the TanStack Router documentation is written for file-based routing and is intended to help you understand in more detail how to configure file-based routing and the technical details behind h...
absent-sapphire
absent-sapphireOP•8mo ago
Oh wow, that completely eluded me. I thought a folder/index.tsx simply indicated the path of the folder. Thanks, it solved it. Appreciated.

Did you find this page helpful?