Why file-based routing simplifies navigation in Remix - See It in Action

Why file-based routing simplifies navigation

📖 Scenario: You are building a simple website using Remix. You want to create pages that users can visit by typing URLs or clicking links. Remix uses file-based routing, which means the files you create inside the app/routes folder automatically become pages on your website.

🎯 Goal: Build a small Remix app with three pages using file-based routing. Each page should show a heading with its name. This will help you see how Remix uses the file structure to create navigation paths without extra code.

📋 What You'll Learn

Create three route files inside app/routes: index.tsx, about.tsx, and contact.tsx

Each route file should export a default React component that returns a heading with the page name

Add links in the index.tsx page to navigate to the About and Contact pages

Use Remix's Link component for navigation

💡 Why This Matters

🌍 Real World

File-based routing is used in many modern web frameworks to make navigation setup faster and less error-prone by matching URLs to file paths automatically.

💼 Career

Understanding file-based routing helps developers quickly build and maintain web apps with clear structure and easy navigation, a common requirement in frontend and full-stack jobs.

1

Create the home page route file

Create a file called index.tsx inside app/routes. Inside it, write a React component that returns an <h1> with the text Home Page. Export this component as the default export.

Remix

// Your code here

Hint

Remember to import Link from @remix-run/react and use it to create navigation links.

2

Create the About page route file

Create a file called about.tsx inside app/routes. Inside it, write a React component that returns an <h1> with the text About Page. Export this component as the default export.

Remix

import { Link } from "@remix-run/react";

// Your code here

Hint

Create a new file about.tsx and export a default function named About that returns the heading.

3

Create the Contact page route file

Create a file called contact.tsx inside app/routes. Inside it, write a React component that returns an <h1> with the text Contact Page. Export this component as the default export.

Remix

import { Link } from "@remix-run/react";

// Your code here

Hint

Create a new file contact.tsx and export a default function named Contact that returns the heading.

4

Verify navigation works with file-based routing

Ensure the index.tsx file contains navigation links using Remix's Link component to /about and /contact. This completes the file-based routing setup where URLs match the file names automatically.

Remix

import { Link } from "@remix-run/react";

// Your code here

Hint

Check that the index.tsx file has the correct Link components pointing to /about and /contact.