How to use nested route less layout the right way

[pkishorez]

I'm trying to create a blog page, such that index has a layout that is different from other nested pages within it.
The route structure I've tried for the same is:

But that doesn't seem to work as expected. since route /blog is resolving with layout within __nested.

The below routes seem to reflect what I'm aiming for, but the folder structure isn't really clean in my opinion.

Please help me understand more about how we can use nested route less layouts the right way :)

Thanks in advance.

[silvenon]

Another hacky way to achieve this would be:

routes
├── blog
│   ├── __home
│   │   └── index.tsx
│   ├── __nested
│   │   ├── $id.tsx
│   │   └── new.tsx
│   └── __nested.tsx
└── index.tsx

However, it should work like in your first screenshot, I'm sad that it doesn't (tried it myself), and I remember finding myself in similar trouble. I hope that this is just a temporary problem in Remix, and I recommend raising an issue about this if there isn't one already.

[pkishorez]

Thanks a lot. This worked!
And way cleaner than the approach I've taken 👍🏻

[silvenon]

@pkishorez apparently this has been fixed in v1.17.0 #3014 (reply in thread). (I haven't tried it.)

[brophdawg11]

Just FYI 1.17.0 is not released yet but when it is it should contain the fix. You can try via the nightly release from last night though: v0.0.0-nightly-33cc4c0-20230525

[kiliman]

I believe it's a bug in Remix. The file layout is simply used to create the config needed by react-router.

Here's how Remix is seeing the above routes

<Routes>
  <Route file="root.tsx">
    <Route path="blog/" file="routes/blog/__nested.tsx">
      <Route path=":id" file="routes/blog/__nested/$id.tsx" />
      <Route path="new" file="routes/blog/__nested/new.tsx" />
    </Route>
    <Route path="blog" index file="routes/blog/index.tsx" />
    <Route index file="routes/index.tsx" />
  </Route>
</Routes>

When it should be like this:

<Routes>
  <Route file="root.tsx">
    <Route path="blog/">
      <Route index file="routes/blog/index.tsx" />
      <Route file="routes/blog/__nested.tsx">
        <Route path=":id" file="routes/blog/__nested/$id.tsx" />
        <Route path="new" file="routes/blog/__nested/new.tsx" />
      </Route>
    </Route>
    <Route index file="routes/index.tsx" />
  </Route>
</Routes>

[brophdawg11]

Thanks for the bug report! I'm looking into this in #3986

[brophdawg11]

ok sorry for the delay 😬 , but I just merged a fix for this in #4355 which should get included in the next release

[silvenon]

Awesome, thank you so much! 🎉

[brophdawg11]

Sorry folks we found a small issue with that approach so reverted and re-addressing in #4421

[brophdawg11]

Sorry for the delay! #4421 is now merged and should be available once v1.17.0 is released