Group related routes together in Remix

Next.js released its new nested routes feature yesterday (Friday, 9th September). One of the things they support is Route Groups. The idea is that you can create a particular folder with the name between parentheses and group all the routes inside that folder without adding new URL segments so that you can do this:

/app
  /layout.js
  /(shop)
    /layout.js
    /accounts
      /page.js
    /cart
      /page.js
  /checkout
    /page.js

Doing this, Next.js will create /accounts and /cart grouped, but without adding /shop on the URL, they can also have this shared layout if they want.

I saw some people saying Remix should copy this, so let's see how you can do this on Remix today and how you could have been doing it since the first release of Remix!

Pathless Layout Routes

Pathless Layout Routes is a feature Remix has had since before v1, which lets you add a layout to a group of routes without adding a new URL segment.

/app
  /routes
    /__shop.tsx
    /__shop
      /accounts.tsx
      /cart.tsx
    /checkout.tsx
  /root.tsx

By using a file with the name starting with __ (two underscores) and a folder with the same name, we now have a shared layout (the **shop.tsx file) which will render all the routes inside the **shop folder but without adding /shop to the URL.

But what happens if I want to group routes without adding a layout? Remove the __shop.tsx file!

/app
  /routes
    /__shop
      /accounts.tsx
      /cart.tsx
    /checkout.tsx
  /root.tsx

Removing the file allows us to group related routes on the file system without adding a URL segment and a layout to the UI.