Is it possible to use flat routes with the first level as a folder?

[JClackett]

Just noticed you released hybrid routes but was wondering if its possible to do something like this:

I have 2 main groups of routes, _app and _admin (there's some other ones too). I really like flat routes but having to have all _app files next to all _admin files is actually quite annoying and verbose, I kind of want to have a folder for _app and a folder for _admin, and just close the admin folder when im not working on it.

Ideal structure as:

pages ->
   _app.tsx (layout route, could go inside _app, but I dont mind)
   _app ->
      index.tsx
      account._index.tsx
      account.library._index.tsx
      account.library.shows.tsx
      account.library.tsx
      account.tsx
      login.tsx
      ... and so on with many many more routes
   admin.tsx (layout route, could go inside admin, but I dont mind)
   admin ->
      index.tsx
      shows._index.tsx
      shows.$id._index.tsx
      ... and so on with many many more routes   

Maybe this would be possible with a static hard coded config setup?

Bonus: Would be nice to be able to arbitrarily jump into a folder if a specific subset of routes contains a lot of child routes.

Thoughts? :)

[kiliman]

Someone asked about this very scenario on Discord. I posted on the flat routes RFC a potential solution. remix-run/remix#4482 (comment)

I'm going to implement it in this package and see if it ends up in core Remix.

[JClackett]

That is absolutely delicious news, appreciate the work on this ❤️

[JClackett]

I'll wait to see what you do before updating to the solution in the comment for now

[kiliman]

Here's what I've got.

To create a folder but treat it as flat-file, just append the + to the folder name.
_auth+/forgot-password.tsx => _auth.forgot-password.tsx

NOTE: You can include the _layout.tsx file inside your folder. You do NOT need to have a _public.tsx or users.tsx file.

You can still use flat-folders for colocation. So this is best of both formats.

You

❯ tree app/routes-hybrid-files/
a❯ tree app/routes-hybrid-files/
app/routes-hybrid-files/
├── _auth+
│   ├── forgot-password.tsx
│   └── login.tsx
├── _public+
│   ├── _layout.tsx
│   ├── about.tsx
│   ├── contact[.jpg].tsx
│   └── index.tsx
├── project
│   ├── _layout.tsx
│   ├── parent.child
│   │   └── index.tsx
│   └── parent.child.grandchild
│       ├── index.tsx
│       └── styles.css
└── users+
    ├── $userId.tsx
    ├── $userId_.edit.tsx
    ├── _layout.tsx
    └── index.tsx

<Routes>
  <Route file="root.tsx">
    <Route path="forgot-password" file="routes-hybrid-files/_auth+/forgot-password.tsx" />
    <Route path="login" file="routes-hybrid-files/_auth+/login.tsx" />
    <Route file="routes-hybrid-files/_public+/_layout.tsx">
      <Route path="about" file="routes-hybrid-files/_public+/about.tsx" />
      <Route path="contact.jpg" file="routes-hybrid-files/_public+/contact[.jpg].tsx" />
      <Route index file="routes-hybrid-files/_public+/index.tsx" />
    </Route>
    <Route path="project" file="routes-hybrid-files/project/_layout.tsx">
      <Route path="parent/child" file="routes-hybrid-files/project/parent.child/index.tsx">
        <Route path="grandchild" file="routes-hybrid-files/project/parent.child.grandchild/index.tsx" />
      </Route>
    </Route>
    <Route path="users" file="routes-hybrid-files/users+/_layout.tsx">
      <Route path=":userId" file="routes-hybrid-files/users+/$userId.tsx" />
      <Route path=":userId/edit" file="routes-hybrid-files/users+/$userId_.edit.tsx" />
      <Route index file="routes-hybrid-files/users+/index.tsx" />
    </Route>
  </Route>
</Routes>

[JClackett]

Hey @kiliman

Just upgraded to 0.5.1 and noticed some changes that actually means my current routes (was on 0.4.8) aren't working (conflicts).

Here are my admin routes and admin files

├── admin._index.tsx
├── admin.artists.$id._profile._index.tsx
├── admin.artists.$id._profile.episodes.tsx
├── admin.artists.$id._profile.shows.tsx
├── admin.artists.$id._profile.tsx
├── admin.artists.$id.shows.$showId._profile._index.tsx
├── admin.artists.$id.shows.$showId._profile.episodes.tsx
├── admin.artists.$id.shows.$showId._profile.tsx
├── admin.artists.$id.shows.$showId.episodes.$episodeId.tsx
├── admin.artists.$id.shows.$showId.episodes.new.tsx
├── admin.artists.$id.shows.$showId.episodes.tsx
├── admin.artists.$id.shows.$showId.tsx
├── admin.artists.$id.shows.new.tsx
├── admin.artists.$id.shows.tsx
├── admin.artists.$id.tsx
├── admin.artists._index.tsx
├── admin.artists.new.tsx
├── admin.episodes.tsx
├── admin.tsx

    <Route path="admin" file="pages/admin.tsx">
      <Route path="artists/:id" file="pages/admin.artists.$id.tsx">
        <Route file="pages/admin.artists.$id._profile.tsx">
          <Route path="episodes" file="pages/admin.artists.$id._profile.episodes.tsx" />
          <Route path="shows" file="pages/admin.artists.$id._profile.shows.tsx" />
          <Route index file="pages/admin.artists.$id._profile._index.tsx" />
        </Route>
        <Route path="shows" file="pages/admin.artists.$id.shows.tsx">
          <Route path=":showId" file="pages/admin.artists.$id.shows.$showId.tsx">
            <Route file="pages/admin.artists.$id.shows.$showId._profile.tsx">
              <Route path="episodes" file="pages/admin.artists.$id.shows.$showId._profile.episodes.tsx" />
              <Route index file="pages/admin.artists.$id.shows.$showId._profile._index.tsx" />
            </Route>
            <Route path="episodes" file="pages/admin.artists.$id.shows.$showId.episodes.tsx">
              <Route path=":episodeId" file="pages/admin.artists.$id.shows.$showId.episodes.$episodeId.tsx" />
              <Route path="new" file="pages/admin.artists.$id.shows.$showId.episodes.new.tsx" />
            </Route>
          </Route>
          <Route path="new" file="pages/admin.artists.$id.shows.new.tsx" />
        </Route>
      </Route>
      <Route path="artists/new" file="pages/admin.artists.new.tsx" />
      <Route path="episodes" file="pages/admin.episodes.tsx" />
      <Route index file="pages/admin._index.tsx" />
      <Route path="artists" index file="pages/admin.artists._index.tsx" />
    </Route>

Essentially I have an artists profile with an "$id" layout route with some tabs to: Index, Shows & Episodes, these three routes share the "_profile" layout, which contains the tabs to the 3 routes. I dont want these tabs showing when you click into a Show or Episode detail page, hence why I put them into a _profile layout because then the _profile stuff is removed when navigating to child (technically sibling routes, I guess)

However when using the updated package I get an error saying that the "pages/admin.artists.$id._profile.tsx" layout and "pages/admin.artists.$id.tsx" layout conflict (along with the another one), I would assume that profile would be nested under $id.

Was just wondering how I would structure that in the new versions, even just straight flat-routes isn't working?