TanStackT
TanStack•16mo ago•
13 replies
urgent-maroon

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 -->



/secure/index.tsx
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
});


could anyone give me some directions? tyvm
Was this page helpful?