T
TanStack•11mo ago
equal-aqua

Question regarding nested layouts

within my app i am trying to achieve a nested routing structure (for including navigation/ect for protected routes) for that i am trying to get the Directory Routes approach to apply the wrapper that /secure/index.tsx introduces around all subsequent routes (/secure/profile/index.tsx, ect) i have probably overseen a small piece of documentation but can someone point out my mistake? this is my routing structure 
/index.tsx
/__root.tsx
/secure/index.tsx
/secure/profile/index.tsx.    <!-- Here i want the shell /secure/index.tsx starts to be applied -->
/index.tsx
/__root.tsx
/secure/index.tsx
/secure/profile/index.tsx.    <!-- Here i want the shell /secure/index.tsx starts to be applied -->
/secure/index.tsx 
export const Route = createFileRoute("/secure/")({
  component: () => (
    <div>
      <h2>Secure Layout</h2>
      <Outlet />
    </div>
  ),
});
export const Route = createFileRoute("/secure/")({
  component: () => (
    <div>
      <h2>Secure Layout</h2>
      <Outlet />
    </div>
  ),
});
/secure/profile/index.tsx 
export const Route = createFileRoute("/secure/profile/")({
  component: () => <div>Hello /secure/profile/!</div>,  //the Secure layout h2 is not present when rendering this page
});
export const Route = createFileRoute("/secure/profile/")({
  component: () => <div>Hello /secure/profile/!</div>,  //the Secure layout h2 is not present when rendering this page
});
could anyone give me some directions? tyvm
9 Replies
fair-rose
fair-rose•11mo ago
IIRC /secure/index.tsx will only be rendered when you're on the /secure page I believe what you need instead is /secure.tsx
equal-aqua
equal-aquaOP•11mo ago
hmmm.... in my case if i want a sub route (/secure/profile for example) how would i go and come up with the folder structure? (when going for https://tanstack.com/router/latest/docs/framework/react/guide/file-based-routing#directory-routes) as my project is large in amount of routes) ah...
fair-rose
fair-rose•11mo ago
/secure.tsx <- has the layout
/secure/profile.tsx <- will render the layout + the profile
/secure.tsx <- has the layout
/secure/profile.tsx <- will render the layout + the profile
equal-aqua
equal-aquaOP•11mo ago
i see so creating a index.tsx for a route causes it not not wrap around its children? for example this will work 
/secure/profile/detail.tsx 
/secure/profile/detail/details/index.tsx
/secure/profile/detail.tsx 
/secure/profile/detail/details/index.tsx
This wont work 
/secure/profile/detail/index.tsx 
/secure/profile/detail/details/index.tsx
/secure/profile/detail/index.tsx 
/secure/profile/detail/details/index.tsx
because than i think i understand it now
fair-rose
fair-rose•11mo ago
/secure.tsx
/secure/index.tsx <- /secure page (layout + index component)
/secure/profile.tsx <- /secure/profile page (layout + profile component)
/secure.tsx
/secure/index.tsx <- /secure page (layout + index component)
/secure/profile.tsx <- /secure/profile page (layout + profile component)
equal-aqua
equal-aquaOP•11mo ago
aaaah
equal-aqua
equal-aquaOP•11mo ago
equal-aqua
equal-aquaOP•11mo ago
Thank you so much! saved the day!
fair-rose
fair-rose•11mo ago
you're welcome 🙂

Did you find this page helpful?