Override layout in nested folder

[axeldesutter]

Hello,

Thank you for the amazing package !

I can't find a way to exclude a nested route from its parent layout when using nested folders convention.

I have the following routes defined in the projects as shown here after:

/customers
/customers/123 (Layout A)
/customers/123/transactions (Layout A)
/customers/123/transactions/456 (Layout B)
/customers/123/transactions/456/logs (Layout B)

app/routes/_dashboard
├── ...
├── customers
│   └── $customer
│       └── route.tsx (With <Outlet /> "A")
│       └── _index
│           └── route.tsx (<- Should have layout A)
│       └── transactions
│           └── route.tsx (<- Should have layout A)
│           └── $transaction 
│               └── route.tsx (With <Outlet /> "B")
               └── _index
│                   └── route.tsx (<- Should have layout B)
│               └── logs
│                   └── route.tsx (<- Should have layout B)
├── ...

I'd like /customers/123 and /customers/123/transactions to have layout A, and /customers/123/transactions/456 and /customers/123/transactions/456/logs to have layout B.

I found a way to do that with flat-files and flat-routes conventions but the application has hundreds of routes and I must use the nested folders convention shown above.

Is there currently a way to obtain that result ? I have tried adding an _ to the $transaction, $transaction/_index or $transaction/logs folders but didn't manage to make it work :-)

Thanks !

[kiliman]

First of all, thanks for the kind words. I appreciate it.

I'm not 100% sure I follow what you're asking.

Here's my initial take. I wasn't sure if you meant that the routes with Layout B DO NOT contain Layout A.

https://stackblitz.com/edit/remix-run-remix-7lgemm

[axeldesutter]

Thank you for taking the time to setup this example !

Actually this result is what I currently get, i.e. layout B being nested under layout A. What I would like to achieve is keeping the same URL with a similar folder structure (maybe adding an _ somewhere or something) but with layout B not nested under by layout A. In the Remix docs, they call it "URL nesting without layout nesting".

From your example, I'd like to go from this:

To this result (the grayscaled area, i.e. layout A, should not be visible):

I was thinking maybe there could be come convention to be used in the naming of the $transaction+ folder, like $transaction_+ or something similar ?

[kiliman]

Thanks for clarifying. I thought that was probably the case. I will update the example to show how to do it.

[kiliman]

Ok, I've updated the example. The trick to getting the structure you want is to create a parallel hierarchy. You can then disable the layout you don't want.

[axeldesutter]

Separating the routes into different folders is indeed working, thanks !

As a feedback though, I believe this will eventually create a mess in larger projects. In the situation where "We have an issue on page /super/long/and/nested/web/page", it could become harder and harder to find the routes files as the project grows.

I will try to allocate some time to experiment with the package source code and send a PR if I can get something working. I was thinking of a multiple trailing _ convention, where each _ at the end of the folder would "skip" one parent layout, so [...]/A/B/C/myfolder__ would be nested under A but neither of B and C, while preserving the URL structure.

That being said, it's another story and I believe this issue is closed.

Thank you for your help !

[kiliman]

Yes, it's difficult to support all these intents with just a file path.

For complex scenarios, I typically export handle and useMatches to customize layouts further up the route tree.