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
/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
/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.