Only first layout rendered / loaded in `flatRoutes`

[qFlensT]

Reproduction

Go and navigate through "Navigate to page with layouts ➡️" link.

System Info

System:
    OS: macOS 15.5
    CPU: (8) arm64 Apple M2
    Memory: 104.47 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.12.0 - ~/.nvm/versions/node/v22.12.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.12.0/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v22.12.0/bin/npm
    pnpm: 10.11.0 - ~/.nvm/versions/node/v22.12.0/bin/pnpm
    bun: 1.2.2 - ~/.bun/bin/bun
  Browsers:
    Chrome: 136.0.7103.93
    Safari: 18.5
  npmPackages:
    @react-router/dev: ^7.7.0 => 7.7.0
    @react-router/fs-routes: ^7.7.0 => 7.7.0
    @react-router/node: ^7.7.0 => 7.7.0
    @react-router/serve: ^7.7.0 => 7.7.0
    react-router: ^7.7.0 => 7.7.0
    vite: ^6.3.3 => 6.3.5

Used Package Manager

npm

Expected Behavior

The loader is triggered and the component of each layout is rendered regardless of nesting

Actual Behavior

Only the first layout is rendered and loaded for page route if we're using this structure:

routes/
├─ _layout1.tsx
├─ _layout2.tsx
├─ _layout1._layout2.page.tsx

But if we do:

routes/
├─ _layout1.tsx
├─ _layout2.tsx
├─ _layout1._layout2.tsx // here move _layout2.tsx code
├─ _layout1._layout2.page.tsx

that will work fine.

[sergiodxa]

That is expected, routes/_layout1.tsx and routes/_layout2.tsx are two different layouts at the same level, so you can have routes/_layout1.page.tsx or routes/_layout2.page.tsx and it will work, but you can't have routes/_layout2._layout2.page.tsx and expect both layouts to be rendered because layout2 is not nested inside layout.

The correct way is what you found works:

routes/
├─ _layout1.tsx // first layout
├─ _layout1._layout2.tsx // second layout nested inside first layout
├─ _layout1._layout2.page.tsx // non-layout route nested inside both layouts

If you want to be able to use layout1, or layout2, or both, you will need to configure the routes yourself instead of using the flatRoutes package, or you will need to do something like:

routes/
├─ _layout1.tsx // layout1
├─ _layout2.tsx // layout2
├─ _layout1._layout2.tsx // layout2 (nested inside layout1)
├─ _layout2._layout1.tsx // layout1 (nested inside layout2)

Then you can do any of these:

routes/
├─ _layout1.page.tsx // inside layout1 only
├─ _layout2.page.tsx // inside layout2 only
├─ _layout1._layout2.page.tsx // inside layout2 (nested inside layout1)
├─ _layout2._layout1.page.tsx // inside layout1 (nested inside layout2)