MFS202 : Table of Contents

Chapter 2

Lesson 3

Load only what you need: Nested routes

Supercharge your Remix app with lightning-fast routing! In this lesson, you'll dive deep into the basic routing structure of Remix and uncover the power of nested routing. Discover how it can optimize your app's performance and provide a seamless experience for your users.

Quiz it to win it

Take the quiz

4 Questions
12 XP

Routing is a fundamental concept in a web app, responsible for displaying the right content to users based on the URL they visit. In this lesson, we will learn the basics of routing in Remix and how it utilises nested layouts and parallel data fetching to make the pages faster.

In Remix, routes are defined using a file system-based approach. Each file in the routes directory represents a route in the application. For example, a file named about.tsx in the routes directory would correspond to the /about URL path. This approach makes it easy to visualize and manage the structure of your application's routes.

Each route file exports a default component, which is what gets rendered when the user navigates to that route.

When a user navigates to /about, the About component will be displayed. This simplicity is one of the key advantages of Remix's routing system. It aligns closely with the file structure, making organising and understanding the application's navigation flow intuitively.

As we have learned till now, the power of Remix lies in its ability to handle data loading and mutations seamlessly within the routes. Each route module can export a loader function for fetching data and an action function for handling non-GET requests. This tight coupling of data handling with routes ensures a more cohesive and maintainable codebase.

Dynamic Routes

Get started for free today!

No commitments. No contracts. Enjoy all features for a day — join in just three clicks!

No credit card required.

Quiz it to win it

Complete this quiz successfully to proceed to the next lesson and win upto 12XP.

Start quiz for this lesson

Completing this quiz will get you

+12 Experience Points

+7% course progress