Mastering Remix’s Unique Routing System: A Deep Dive into Flat Routes
When building an application, routing is a crucial aspect that touches on sensitive areas like authentication, data fetching, and code bundling. Remix, a full-stack React framework for server-side-rendered applications, is heavily based on the concept of routing, thanks to its foundation built on top of React Router. In this article, we’ll explore Remix’s unique routing system, focusing on its concept of flat routes.
Understanding Routing in Remix
Remix offers various built-in routing options, including Route, URL, Nested Routes, Path, Parent Layout Route, Pathless Route, Child Route, Index Route, Dynamic Segment, and Splat. However, flat routes are not a built-in feature – instead, they’re available as a third-party package. The official GitHub repository provides several ways to add this routing approach to our Remix apps.
Filenaming Conventions in Remix
Before implementing flat routes, it’s essential to understand Remix’s filenaming conventions. Use a single underscore instead of a double underscore prefix, and replace / with . to use URL segments. For example, author._index.tsx becomes the home route, while author.tsx is not a layout.
Implementing Flat Routes in Remix
Flat routes can be enabled via a third-party package using a config option. There are two approaches to configuring flat routes: flat files and flat folders. Flat files are suitable for simpler applications with fewer files and folders, while flat folders are ideal for larger apps with many files and folders.
Flat Files Convention
In the flat files approach, our entire application is comprised of files, with no folders except for the one containing our entire app. Filenames act as parent layouts, and the longest matching prefix determines which is a parent layout. For example, author._index.tsx becomes the home route, while author/1234/edit is not a parent layout.
Limitations with Flat Files
However, flat files have limitations. Without folders, we cannot co-locate supporting files with this type of route mechanism, making it unsuitable for larger applications.
Flat Folders Convention
Flat folders, on the other hand, are well-suited for large apps. Instead of routing using filenames, the folder itself is treated as the route name. Internally, Remix does not differentiate between routes and layouts; layouts are routes with outlets. We can add aliases to our filenames to make them more descriptive.
Using Flat Routes in a Demo Application
Let’s implement flat routes in a Remix project. We’ll build a route structure for an application where users can see the landing page, authenticate, and enter the main dashboard. We’ll create a new Remix project, install the flat routes package, and configure the remix.config.ts file to use the package.
Adding Hybrid Routing
Hybrid routing allows us to use a nested folder structure for our application while preserving the co-location feature of flat routes. We can create top-level folders for parent layouts like _public, _auth, or users, and nest our routes under them.
Benefits of Using Flat Routes
The flat route package offers several advantages, including:
- Easy visualization of routes
- Co-location of supported files with each route
- Decreased friction during refactor/redesign
- Simplified migration to Remix
- Active maintenance and planning as part of a future Remix release
Migrating Existing Routes to Flat Routes
We can migrate an existing application to use the flat route convention by using the library’s command-line interface. This allows us to specify whether we want to migrate our existing app to a flat files or flat folders convention.
By mastering Remix’s unique routing system and leveraging flat routes, we can build more dynamic and flexible applications with ease.