Routing in Remix

“Routing is possibly the most important concept to understand in Remix.”

– Remix documentation

Michael Jackson and Ryan Florence spent years building React Router. It is not a surprise that routing plays an integral role in Remix. One core idea that Michael and Ryan brought over from React Router to Remix is nested routing. Nested routing is a powerful feature that enables the composition of route components.

In this chapter, you will learn about routing in Remix. We’ll cover the following topics:

• Working with Remix's route module API
• Composing pages from nested routes
• Using route parameters for dynamic routing
• Sharing layouts
• Handling navigations in Remix

In this chapter, we will dive into nested routing and cover Remix’s route convention. We will start by creating standalone pages and reviewing Remix’s route module exports. Next, we will review nested, index, dynamic, and (pathless...

Technical requirements

In Chapter 3, Deployment Targets, Adapters, and Stacks, we set up the demo application for this book. If you haven’t already, make sure to follow the instructions of Chapter 3, as we will continue working with BeeRich in this chapter.

You can find the solution code and additional information to this chapter on GitHub: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/04-routing-in-remix.

Working with Remix's route module API

Remix takes on the responsibilities of a compiler, a runtime, and a router. In Remix, you create routes (route modules) as part of a hierarchy. Among other things, Remix’s router determines which route modules to match and render on a request.

This section will walk you through the creation of route modules in Remix. You will learn how to create standalone pages and understand how routes tie back to the root.tsx file. You will further understand how index routes fit into the picture (or, I should say, on a screen). Finally, the section will introduce you to the different available exports that route modules can expose.

Route file-naming conventions

Before we get started, note that Remix switched to a new route file-naming convention with Remix v2. This book follows that convention.

If you are new to Remix, then this chapter will get you started with Remix’s latest convention. If you have prior experience with Remix...

Composing pages from nested routes

BeeRich is a personal bookkeeping application. Users should be able to view their expenses and sources of income. In this section, we will create a hierarchy of nested routes to compose the dashboard pages of BeeRich.

So far, we have seen Outlet being used in the root.tsx file. The Outlet component declares the location of the child route inside the markup of the parent route. The Outlet component in root.tsx is rendered inside the HTML body. Hence, all child routes are wrapped inside the body element. This is the power of nested routing. With nested routing, you can compose pages out of several route modules.

Let’s use nested routing and the Outlet component to construct our dashboard. The two routes, /dashboard/expenses and /dashboard/income, will serve as our overview pages:

1. First, add two files inside the routes folder:
   • dashboard.expenses.tsx
   • dashboard.income.tsx

   Note that we use dot delimiters (.) to separate path segments ...

Using route parameters for dynamic routing

URLs often include parameters such as identifiers to specify associated resources. This allows the application to retrieve the right data for the request. In this section, you will learn how to work with URL parameters in Remix.

So far, we have created a route module for a hardcoded expenses details page (/dashboard.expenses.1.tsx). The number 1 in the URL refers to the expense with the expense identifier 1. However, the goal is to create a dynamic route module capable of handling variable identifiers. Luckily, Remix provides a convention for how to define a parameterized route segment.

Parameterized route segments

In Remix, dynamic segments of the URL are referred to as parameterized segments. We use the $ symbol to declare a route parameter. This turns the URL segment into a parameter that we can access and use to fetch data.

Let’s see how we can use a parameterized segment in BeeRich for the expenses details route:

...

Sharing layouts

Nested routing enables us to compose a page from a nested route hierarchy. In this section, we will utilize parent routes to reuse layouts between nested child routes. We will also learn how to share code between routes without creating new segments in the URL, with pathless layout routes.

Using parent layout routes

Let’s improve the look and feel of the BeeRich dashboard. Ideally, a user should be able to quickly switch between the income and expenses overview pages. It’s time to add a navigation bar.

We already utilized parent layout routes for the dashboard/expenses and dashboard/income pages. By rendering the list of expenses and income in a parent route (dashboard.expenses.tsx and dashboard.income.tsx, respectively), we nested the content of the child routes on the same page.

Now, we will take advantage of nested routing again to add a shared navigation bar to all dashboard pages. Follow these steps:

1. Create a dashboard.tsx file...

Handling navigations in Remix

So far, we have used anchor tags to navigate between pages. You might have noticed that every navigation – using an anchor tag – triggers a full-page reload. This is the browser’s default behavior when navigating between pages. However, Remix also offers primitives for client-side navigations.

In this section, we will introduce you to Remix’s link components and Remix’s global navigation object. We will practice utilizing the navigation object to indicate page loads and learn more about server-side redirects with Remix.

Navigating with Remix’s link components

By default, a page navigation triggers a document request to the web server of the resource. The web server forwards the request to Remix (our HTTP request handler). Remix then renders a new document on the server to fulfill the request and responds with the rendered HTML document (or any other HTTP response).

When utilizing Remix’s link...

Summary

Remix provides a convention-based file-based router. Arguably the most powerful feature of Remix’s router is nested routing. In Remix, you create routes (route modules) as part of a hierarchy. Remix’s router maps the pathname of the URL to a set of matching route modules. Route modules make up the pages of your Remix application.

In this chapter, you created your first routes in Remix. We started off by creating two standalone pages. You learned about the special role of index routes as the default children of their parent routes. You were also introduced to the exports available in Remix’s route modules.

Next, we created a nested route hierarchy for our dashboard. We used parent layout routes and the Outlet component to reuse styling and content across different child routes.

We also used a loader function and a route parameter to create routes for our income and expenses details views. You learned how to declare parameterized route modules using...

Further reading

In this chapter, you learned about the key concepts of Remix’s routing solution. You can find more concepts, such as optional route modules, in Remix’s route documentation: https://remix.run/docs/en/2/file-conventions/routes.

Read about Remix’s Link and NavLink components in the Remix documentation:

• https://remix.run/docs/en/2/components/link
• https://remix.run/docs/en/2/components/nav-link

You can read more about the Request/Response model of the Fetch API here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.