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 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
Both routes are nested inside our pathless layout route, but because the pathless adds no URL segment, the will handle the URLs
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
Finally, we have
app/routes/login.tsx, this route is neither nested inside
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.