Pathless route help

[Klukies]

Hey there 👋

I've been using the remix-flat-routes package to migrate our application's routes from the v1 to the v2 convention. However I fell in love with the hybrid approach due to the fact that our applications has so many routes and colocation. During this migration I've seem to have hit a bump with the following routes:

├── payment
│   └── pay-with-xtra.tsx
│       └── __index
│           └── address.tsx
│           └── phone.tsx
│       └── __index.tsx

I've tried using the following but this doesn't seem to work:

├── payment+
│   └── pay-with-xtra
│   └── pay-with-xtra._index
│       └── index.tsx
│   └── pay-with-xtra._index.address
│       └── index.tsx
│   └── pay-with-xtra._index.phone
│       └── index.tsx

I believe this has to do with the fact that the _index is picked up as the route over it being a pathless route?

[kiliman]

EDIT: After looking at your routes again, I originally thought that address and phone were meant to be colocated components. But it seems you want them to be actual routes. That's why it's sometimes hard to answer questions since I don't always know your intentions.

routes
└── payment+
    └── pay-with-extra+
        ├── _index.tsx  => index route /payment/pay-with-extra/
        ├── _layout.tsx => layout for /payment/pay-with-extra
        ├── address.tsx => /payment/pay-with-extra/address
        └── phone.tsx   => /payment/pay-with-extra/phone

<Routes>
  <Route file="root.tsx">
    <Route path="payment/pay-with-extra" file="routes-61/payment+/pay-with-extra+/_layout.tsx">
      <Route path="address" file="routes-61/payment+/pay-with-extra+/address.tsx" />
      <Route path="phone" file="routes-61/payment+/pay-with-extra+/phone.tsx" />
      <Route index file="routes-61/payment+/pay-with-extra+/_index.tsx" />
    </Route>
  </Route>
</Routes>

[kiliman]

If you ever want to make one of those routes a colocated route (that is, have a route module with colocated files like component.tsx or photo.png), just change the route file to a folder (minus the extension), then add a _route.tsx file along with the other files

routes-61
└── payment+
    └── pay-with-extra+
        ├── _index.tsx
        ├── _layout.tsx
        ├── address         => create a folder for the route for colocation
        │   ├── _route.tsx  => route module for /payment/pay-with-extra/address
        │   ├── component.tsx
        │   └── photo.png
        └── phone.tsx

<Routes>
  <Route file="root.tsx">
    <Route path="payment/pay-with-extra" file="routes-61/payment+/pay-with-extra+/_layout.tsx">
      <Route path="address" file="routes-61/payment+/pay-with-extra+/address/_route.tsx" />
      <Route path="phone" file="routes-61/payment+/pay-with-extra+/phone.tsx" />
      <Route index file="routes-61/payment+/pay-with-extra+/_index.tsx" />
    </Route>
  </Route>
</Routes>

[Klukies]

@kiliman I managed to figure out the paths based on your suggestions so thanks for that!
Some quick explanation bellow regarindg my intentions so it's clear for future documentation.
Basically my routes regarding payment look like this:

payment/
├─ index.tsx
payment+/
├─ pay-with-xtra/
│  ├─ call-to-action/
│  ├─ call-to-action.download-the-app/
│  ├─ index/
│  ├─ pay-with-xtra/
│  ├─ pay-with-xtra+/
│  │  ├─ _index._layout/
│  │  │  ├─ components/
│  │  │  ├─ hooks/
│  │  │  ├─ tests/
│  │  │  ├─ index.tsx
│  │  ├─ _index.address/
│  │  ├─ _index.index/
│  │  ├─ _index.phone/
│  │  ├─ history/
│  │  ├─ history.filter/
├─ seamless-pay/

<Routes>
  <Route file="root.tsx">
    <Route path="payment" file="routes/payment/index.tsx">
      <Route path="call-to-action" file="routes/payment+/call-to-action/index.tsx">
        <Route path="download-the-app" file="routes/payment+/call-to-action.download-the-app/index.tsx"/>
      </Route>
      <Route path="pay-with-xtra" file="routes/payment+/pay-with-xtra+/index.tsx">
        <Route file="routes/payment+/pay-with-xtra+/_index._layout/index.tsx">
          <Route index file="routes/payment+/pay-with-xtra+/_index.index/index.tsx" />
          <Route path="address" file="routes/payment+/pay-with-xtra+/_index.address/index.tsx" />
          <Route path="phone" file="routes/payment+/pay-with-xtra+/_index.phone/index.tsx" />
        </Route>
        <Route path="history" file="routes/payment+/pay-with-xtra+/history/index.tsx">
          <Route path="filter" file="routes/payment+/pay-with-xtra+/history.filter/index.tsx" />
        </Route>
      </Route>
    </Route>
  </Route>
</Routes>

I really liked the "each route is it's own app" approach, thus by using hybrid routes and colocation, each route has their own functionality, styling, tests, etc. with the index.tsx inside a folder always being the route.