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

TanStack•2y ago•

13 replies

urgent-maroon

Question regarding nested layouts

/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

Question regarding nested layouts

Similar Threads

Question regarding nested layouts

Similar Threads

Similar Threads

Similar Threads