Example of Layout With Nesting For File Route #13625

YTKme · 2025-05-16T22:03:44Z

YTKme
May 16, 2025

Hello,

I was wondering if anyone can provide an example of how different layout would work for different route in file route. The documentation didn't seem to have any example on what I am trying to do.

I have the routes folder under app for the routes. I wanted to have it configured where the alpha route would have one layout, and beta route to have a different layout, and anything else not define, would just default to root layout.

While searching through the internet, I tried different things such as having a alpha._layout/ route, or having _layout.tsx. But none seem to work. But also I am not sure how the "layout" file should look? I tried something similar to root.tsx with export function Layout and having an <Outlet />, but that did not seem to work.

Any help would be apprecitated.

Project Structure

project/
- app/
  - routes/
    - _landing/
      - route.tsx
    - alpha/
      - route.tsx
    - alpha._index/
      - route.tsx
    - alpha.apple/
      - route.tsx
    - beta/
      - route.tsx
  - root.tsx
  - routes.tsx

root.tsx

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div>
          <h1>Root Layout</h1>
        </div>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
};

export default function Root() {
  return (
    <Outlet />
  );
}

YTKme · 2025-05-16T23:14:53Z

YTKme
May 16, 2025
Author

Update:

I figured it out after a bit more trial and error, but here's are the how the route.tsx looks

alpha/route.tsx

import { Outlet } from "react-router";

export default function AlphaLayout() {
  return (
    <div>
      <h1>Alpha Layout</h1>
      <Outlet />
    </div>
  );
};

alpha._index/route.tsx

export default function AlphaRoot() {
  return (
    <div>
      <h1>Alpha Root</h1>
    </div>
  );
};

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Example of Layout With Nesting For File Route #13625

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Example of Layout With Nesting For File Route #13625

Uh oh!

YTKme May 16, 2025

Replies: 1 comment

Uh oh!

YTKme May 16, 2025 Author

YTKme
May 16, 2025

YTKme
May 16, 2025
Author