How toCreate multiple top-level layouts in Remix

If you're building a Remix application, most likely you have found yourself needing most routes to have a specific layout (e.g. a header at the top with a navigation) while other routes shouldn't have any layout (e.g. the login/signup routes) and use a different one (e.g. a dashboard section).

One common way to solve this is the React way, that is, to add the Layout component on every route that needs it.

Another way is to use the handle export to let routes decide if they want or not the layout, this is similar to how layouts worked in Next Pages Router.

But in Remix there's a more Remix way to do it, which uses the file system.

Using the example above of a index plus other routes, login and dashboard section, having different layouts, we can create the following file structure:

app/routes/_.tsx
app/routes/_._index.tsx
app/routes/_.about.tsx
app/routes/dashboard.tsx
app/routes/dashboard.users.tsx
app/routes/dashboard.articles.tsx
app/routes/login.tsx

Here app/routes/_.tsx is a pathless layout route, this route will not add any segment to the URL, but any routes with _. in the name will be nested inside, and that's what we do on app/routes/_._index.tsx and app/routes/_.about.tsx.

Both routes are nested inside our pathless layout route, but because the pathless adds no URL segment, the will handle the URLs / (for app/routes/_._index.tsx) and /about (for app/routes/_.about.tsx).

The next layout is app/routes/dashboard.tsx, this is a normal route, it add /dashboard to the URL and can have nested routes. Since it's named dashboard.tsx and not _.dashboard.tsx it's not nested inside the pathless layout.

Any route starting with dashboard. in the file name will be a child route of app/routes/dashboard.tsx, this is the case of app/routes/dashboard.users.tsx and app/routes/dashboard.articles.tsx.

Finally, we have app/routes/login.tsx, this route is neither nested inside _. or dashboard., so it doesn't re-use any of the layout. As long as our app/root.tsx doesn't add any UI and only focus on the basic document and context providers, this route will have full control over the UI.