Remix Run v2 Routing: a simple guide for Next.js devs

November 28, 2024 (4mo ago)

Remix is an edge native, full stack JavaScript framework for building modern, fast, and resilient user experiences. It unifies the client and server with web standards so you can think less about code and more about your product.

— Remix Docs

Routing is a fundamental part of any web application, and Remix Run offers a unique, flexible, and powerful approach to handling routes. For developers coming from Next.js, Remix introduces concepts like nested routes and server-first data loading that might feel fresh yet familiar.

In this post, we’ll dive into Remix Run’s routing system, breaking down its core concepts such as static routes, dynamic segments, nested routes, and more. Along the way, we’ll draw comparisons to Next.js to help you see how Remix’s approach differs and when it might be the right tool for your next project.

By the end of this article, you’ll have a clear understanding of Remix Run’s routing capabilities and the confidence to start exploring this exciting framework.

1. Basic Routes

In Remix Run, creating a route is as simple as placing a file inside the routes folder of your project. Each file directly maps to a URL path based on its name, eliminating the need for complex configuration. This file-based routing system is particularly well-suited for static pages like the homepage, an "About" page, or any other content that doesn’t change frequently.

For instance:

  • A file named _index.tsx represents the homepage and is accessible at the root URL /.
  • A file named about.tsx corresponds to the /about URL.
  • Think of these routes as a straightforward mapping system where the file name translates directly to the URL. This simplicity makes setting up common static pages effortless. There’s no need to write extra code or manage a routing table—Remix automatically handles it all behind the scenes.

Let’s say you’re building a portfolio site. Your file structure might look like this:

  • _index.tsx for the homepage /
  • about.tsx for your “About Me” section /about
  • contact.tsx for a contact page /contact

In Next.js you'll do something like this:

app/
├── page.tsx             # Route for the / path
├── about/
│   └── page.tsx         # Route for the /about path
├── contact/
│   └── page.tsx         # Route for the /contact path
└── layout.tsx

In Remix you'll do something like this instead:

app/
└── root.tsx             # Main application component
routes/
│    └── _index.tsx      # Routes for the / path
│    └── about.tsx       # Routes for the /about path
│    └── contact.tsx     # Routes for the /contact path
package.json             # Project metadata and dependencies
vite.config.js

Any JavaScript or TypeScript files in the app/routes directory will become routes in your application. The filename maps to the route's URL pathname, except for _index.tsx which is the index route for the root route.

- Remix file convention

2. Dot Delimiters

In Remix Run, dot delimiters provide a clean and organized way to group related pages under a single URL path while maintaining separate route files. This feature is especially handy when you have a section of your site that contains multiple pages related to a common topic, but each page serves a distinct purpose.

For example, let’s say your site includes a section dedicated abouts section. You may want to create separate pages for about your company and about your customer that you're aiming to, all accessible under the main /about URL.

In Next.js you'll do something like this:

app/
├── page.tsx             # Route for the / path
├── about/
│   └── company/
│   │   └── page.tsx         # Route for the /about/company path
│   └── customer/
│       └── page.tsx         # Route for the /about/customer path
└── layout.tsx

In Remix you'll do something like this instead:

app/
└── root.tsx             # Main application component
routes/
│    └── _index.tsx             # Routes for the / path
│    └── about.company.tsx      # Routes for the /about/company path
│    └── about.customer.tsx     # Routes for the /about/customer path
│
package.json             # Project metadata and dependencies
vite.config.js

By naming your route files using dot delimiters, such as about.company.tsx and about.customer.tsx, Remix will automatically generate the following routes:

  • /about/company for about company page
  • /about/customer for about customer page
  • Even though the files are separate, Remix understands that these routes belong to the /about section, grouping them logically. This approach makes it easier to manage related pages while keeping your project structure tidy.

In simpler terms, think of dot delimiters as a way to create “sub-pages” under a main topic. For instance, if you have a /products section, you could create files like products.new.tsx and products.featured.tsx. These would map to:

  • /products/new
  • /products/featured
  • Using dot delimiters ensures your project remains organized, particularly when working with sections that include multiple sub-pages. This structure not only keeps your code manageable but also enhances the readability of your routes.

3. Dynamic Segments

Dynamic segments in Remix Run provide a powerful way to create routes that adapt to changing URL values, making your application more flexible. These are defined by including a $ symbol in the file name, which transforms part of the URL into a variable.

For example, if you create a file named movies.$movieName.tsx, it will match URLs like:

  • /movies/inception
  • /movies/avatar
  • In these cases, the $movieName segment becomes dynamic, serving as a placeholder for the specific value in the URL. For instance:

Visiting /movies/inception loads data related to "Inception." Visiting /movies/avatar fetches information about "Avatar." This dynamic segment is highly useful for building pages based on unique identifiers, such as product names, user profiles, or article titles.

In Next.js you'll do something like this:

app/
├── page.tsx             # Route for the / path
├── movies/
│   └── [movieName]/
│       └── page.tsx         # This route matches /movies/inception or /movies/avatar that match a dynamic segment
│
└── layout.tsx

In Remix you'll do something like this instead:

app/
└── root.tsx             # Main application component
routes/
│    └── _index.tsx                 # Routes for the / path
│    └── movies.$movieName.tsx      # Routes for the /movies/inception or /movies/avatar path that match a dynamic segment
│    └── movies.trending.tsx        # This route only matches /movies/trending
│
package.json             # Project metadata and dependencies
vite.config.js

Let’s say you’re building an e-commerce site. You could create a file named products.$productId.tsx to handle different product pages:

  • /products/12345 would display the product with ID 12345.
  • /products/67890 would show details for the product with ID 67890.

Dynamic segments allow you to create flexible, data-driven routes that automatically adapt based on the URL, enabling you to build scalable applications with minimal configuration.

4. Nested Routes (with layout)

Nested routes in Remix Run enable you to create parent-child route relationships, allowing a parent route to wrap its child routes. This is particularly useful when you want shared components, such as navigation bars, headers, or sidebars, to persist across multiple related pages.

For example, consider a parent route file named actors.tsx. You could define child routes like:

  • actors._index.tsx for the main /actors page.
  • actors.$actorName.tsx for specific actor profiles, such as /actors/tom-hanks.

In Next.js you'll do something like this:

app/
├── page.tsx             # Route for the / path
├── actors/
│   └── [actor-name]/
│   │   └── page.tsx     # This route matches /actors/tom-hanks or another path that match a dynamic segment
│   │
│   └── page.tsx         # This route matches /actors
│   └── layout.tsx       # A layout that wraps the actors page and shared components
│
└── layout.tsx

In Remix you'll do something like this instead:

app/
└── root.tsx             # Main application component
routes/
│    └── actors._index.tsx            # Routes for the /actors path
│    └── actors.$actorName.tsx        # This route matches /actors/tom-hanks or another path that match a dynamic segment
│
package.json             # Project metadata and dependencies
vite.config.js

5. Nested Routes (without layout)

In Remix Run, nested routes often inherit the layout from their parent route, but there are cases where you might want to group routes under a common URL structure without sharing the parent layout. Remix allows you to achieve this flexibility easily.

What Are Nested Routes Without Layout?

These are routes that share a parent path (e.g., /actors) but do not inherit the components or layout from the parent route file. This is useful when you want related pages to be grouped under a single URL structure while maintaining distinct designs or behaviors for each page.

Example: Let’s say you’re building a site with an actors section. You can structure the routes like this:

  • actors._index.tsx: Represents /actors (the main actors page).
  • actors.trending.tsx: Represents /actors/trending (a page for trending actors).

While both routes fall under the /actors URL path, the child route actors.trending.tsx will not inherit the layout or components (like a sidebar or header) defined in actors._index.tsx.

Why Use This Approach?

  • Organized Structure: You can keep related routes grouped logically in your file structure without enforcing shared layouts.

  • Flexibility in Design: Each route can define its own layout or functionality, allowing for tailored experiences for different pages.

In this setup, the parent actors.tsx can define a shared layout (e.g., a header or sidebar) that remains consistent across all its child pages. Each child route renders its unique content within the parent layout, ensuring a cohesive user experience while delivering tailored content.

Nested routes are ideal for creating sections of your site that share a common structure or layout, such as dashboards, user profiles, or content categories. They simplify code organization, improve reusability, and provide a unified look and feel across related pages.

6. Pathless Routes

Pathless routes in Remix Run let you group related routes together under a shared layout or structure without adding an intermediate URL path for the group. This feature is especially helpful for pages that share a layout—like login and register pages—while keeping URLs clean and straightforward.

What is a Pathless Route?

A pathless route is defined by adding an underscore (_) before the file or folder name in your routes directory, such as _auth.tsx. The underscore signals Remix to exclude the file from generating a corresponding URL. For example, even though you have a file named _auth.tsx, there will not be a /auth page in your application.

Why Use a Pathless Route? Suppose your app has two pages, login and register, which share a common layout (like a header, footer, or consistent styles). Without pathless routes, you’d either:

  • Duplicate the layout code for both pages.
  • Introduce an unnecessary /auth intermediate URL to group them.

Pathless routes let you apply the shared structure across these pages without cluttering your URLs. This makes your app cleaner and reduces redundant code.

Example Structure: Here’s how you might organize the routes for a login and register flow:

app/
└── root.tsx             # Main application component
routes/
│    └── _auth.tsx          (Pathless route: shared layout for login and register)
│    └── _auth.login.tsx    (Login page at `/login`)
│    └── _auth.register.tsx (Register page at `/register`)
│
package.json             # Project metadata and dependencies
vite.config.js

In this structure:

  • The _auth.tsx file defines the shared layout for both login and register.
  • The child files _auth.login.tsx and _auth.register.tsx define the content for /login and /register, respectively.

Benefits of Pathless Routes:

  • Cleaner URLs: Keeps unnecessary paths out of the URL structure.
  • Code Reuse: Centralizes shared components or styles to avoid duplication.
  • Improved Organization: Groups related routes logically in the file system without affecting the URL hierarchy.

Pathless routes are perfect for scenarios where you need to group pages under a shared structure without exposing intermediate URLs, ensuring a clean and efficient routing experience.

7. Optional Segments

Optional segments in Remix Run allow you to make parts of a URL flexible, enabling them to appear only if needed. This simplifies your routing setup by letting you manage variations of a URL with a single route file. Optional segments are defined by wrapping them in parentheses, like this: products.($lang).$productId.tsx.

What Are Optional Segments?

Optional segments let your app handle URLs that may or may not include a specific part of the path. Instead of creating multiple routes to accommodate all URL variations, you can use optional segments to support both scenarios in one route. This approach keeps your routes clean and your code manageable.

How Do They Work?

Let’s analyze the example:

products.($lang).$productId.tsx

This single route handles both:

  • /products/123 (no language specified)

  • /products/en/123 (with a language code)

  • ($lang): An optional segment. The app will work whether this part of the URL is present or not.

  • $productId: A required segment representing, for instance, a product’s ID.

Why Use Optional Segments?

Support for Multiple Languages:

  1. Optional segments are perfect for multilingual applications. For example:
  • /products/123: A default language or no language specified.
  • /products/en/123: English specified as the language.

  1. Handling Optional Filters or Parameters:

    If your app has filters, modes, or parameters that are optional, you can use optional segments to keep your URLs clean. For example:

  • /shop: Default view with no filters applied.
  • /shop/sale: Filter for sale items.

Benefits

  • Cleaner URLs: Avoids creating unnecessary intermediate routes.
  • Simplified Code: Reduces duplication by consolidating related route logic into a single file.
  • Flexibility: Allows you to handle different variations of a URL with minimal effort.

Example Use Case

Imagine an e-commerce store supporting multiple languages:

File structure:

routes/
  products.($lang).$productId.tsx

Supported URLs:

  • /products/123 (default product view)
  • /products/en/123 (English version of the product page)
  • /products/fr/123 (French version of the product page)

This structure ensures your application can dynamically adjust based on whether optional parts of the URL are present, making routing seamless and scalable.

8. Spalt Routes

Splat Routes in Remix Run are a powerful feature that allow you to match anything that comes after a specific part of the URL. They’re especially useful when dealing with flexible or unknown URL segments, as they act as a catch-all for deeper paths.

A splat route is defined by a $ symbol followed by a period (.) in the route file name. It captures everything that follows a particular URL segment. For example, a file named files.$.tsx would match URLs like:

  • /files/images
  • /files/documents/reports
  • /files/something-else/deeply/nested

With splat routes, you can handle multiple nested segments dynamically without explicitly defining each possible path in advance.

In Next.js you'll do something like this:

app/
├── page.tsx             # Route for the / path
├── actors/
│   └── [...actors]/
│   │   └── page.tsx     # This route matches /actors/tom-hanks/movies or another path that match a dynamic segment
│   │
│   └── layout.tsx       # A layout that wraps the actors page and shared components
│
└── layout.tsx

In Remix you'll do something like this instead:

app/
└── root.tsx             # Main application component
routes/
│    └── actors.$.tsx            # This route matches /actors/tom-hanks/movies or another path that match a dynamic segment
│
package.json             # Project metadata and dependencies
vite.config.js

How Does It Work? Let’s break it down with an example:

Route File: files.$.tsx

This route captures everything after /files. For example:

  • /files/images
  • /files/documents/reports
  • /files/extra/folder/nested

The $ symbol acts as a placeholder for any segments following /files. It doesn’t matter how deep the URL structure goes; all segments after /files/ will be handled by this route. This flexibility makes splat routes an excellent choice for scenarios where paths are dynamic or unpredictable.

LinkedIn
X