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.
