Creating routes in Remix - Try It Yourself

Creating Routes in Remix

📖 Scenario: You are building a simple website using Remix. You want to create different pages that users can visit by typing URLs in their browser.

🎯 Goal: Create basic routes in Remix by adding files in the app/routes folder. Each route will show a simple message on the page.

📋 What You'll Learn

Create a route file for the home page that shows 'Welcome to the Home Page!'

Create a route file for the about page that shows 'About Us'

Create a route file for the contact page that shows 'Contact Information'

Use Remix's default export function to return JSX for each route

💡 Why This Matters

🌍 Real World

Creating routes is how websites show different pages when users visit different URLs. Remix uses file-based routing to make this easy.

💼 Career

Understanding routing is essential for web developers to build multi-page applications and improve user navigation.

1

Create the Home Page Route

Create a file called app/routes/index.tsx. Inside it, write a default export function called Index that returns a <div> with the text 'Welcome to the Home Page!'.

Remix

// Your code here

Hint

Remember, the home page route in Remix is the index.tsx file inside app/routes.

2

Create the About Page Route

Create a file called app/routes/about.tsx. Inside it, write a default export function called About that returns a <div> with the text 'About Us'.

Remix

export default function Index() {
  return Welcome to the Home Page!;
}

// Your code here

Hint

Each route is a separate file inside app/routes. The file name becomes the URL path.

3

Create the Contact Page Route

Create a file called app/routes/contact.tsx. Inside it, write a default export function called Contact that returns a <div> with the text 'Contact Information'.

Remix

export default function Index() {
  return Welcome to the Home Page!;
}

export default function About() {
  return About Us;
}

// Your code here

Hint

Remember to name the function and file to match the route path.

4

Add Links to Navigate Between Routes

In the app/routes/index.tsx file, import Link from @remix-run/react. Inside the Index function, add three <Link> components that link to '/', '/about', and '/contact' with the texts 'Home', 'About', and 'Contact' respectively. Wrap them in a <nav> element above the welcome message.

Remix

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

export default function Index() {
  // Your code here
}

export default function About() {
  return About Us;
}

export default function Contact() {
  return Contact Information;
}

Hint

Use the Link component from Remix to create navigation links.