why we use "+" in remix-flat-routes to create hybrid routes?

Do you know how to create hybrid routes in remix using remix-flat routes effectively?

Background on Remix Flat Routes

For developers building Remix applications, remix-flat-routes offers a way to manage routes in a structured, flat manner. Instead of navigating through deeply nested folders, this package flattens the routing logic while retaining the application's hierarchy.

This abstraction not only makes route definitions cleaner but also simplifies modifications when the application's complexity increases. However, as users expand their use cases, certain edge cases expose gaps in the package’s functionality.

Core understanding

do you know what is the difference when using + and without +.

parent+
├── _layout.tsx
└── child+
    └──index.tsx

or (without +).

parent
├── _layout.tsx
└── child
    └──index.tsx

Answer

The + suffix is the hybrid route and is used for nesting. On the other hand, folders without the + suffix are for colocation .Hybrid routes use the following transformations:

1. parent+/_layout.tsx => someroute.tsx
2. parent+/child.tsx => parent.child.tsx
3. parent+/child+/another.tsx => parent.child.another.tsx
4. parent+/_.child.tsx => parent_.child.tsx (when you don't want child to use parent layout)
5. index routes should be named _index.tsx (v2 convention), although RFR does support index.tsx.

parent+
├── _layout.tsx     => parent.tsx
└── child+
    └──_index.tsx    => parent.child._index.tsx

and this (without + )

In Remix v2 routing and remix-flat-routes you can use a folder (without +) for colocation. The folder name is your route name, and the route module is the file named: route.tsx. Only the leaf route should have a naked folder. Instead of parent/child/route.tsx it should be parent.child/route.tsx.

parent
├── _layout.tsx      => parent.tsx
└── child            => technically invalid (folder should only be on leaf route)
    └──index.tsx
parent.child         => this is correct 
├── route.tsx        => v2 convention uses `route.tsx` for route module
                        remix-flat-routes allows index, page, route, layout or anything starting with `_`

Reference: issue 103