Creating routes in Remix

Introduction

Routes tell your Remix app which page to show for each web address. They help users see different content when they visit different URLs.

When you want to show a homepage at '/'

When you want to create a page for '/about' with info about your site

When you want to make a page for each blog post like '/posts/123'

When you want to organize your app into sections with different URLs

When you want to handle user navigation between pages

Syntax

Remix

Create a file inside the 'app/routes' folder with the path name matching the URL.
Example: 'app/routes/about.jsx' for '/about' route.

Inside the file, export a React component as default:

export default function About() {
  return <div>About page content</div>;
}

File names inside 'app/routes' map directly to URL paths.

Use square brackets for dynamic routes, e.g., '[id].jsx' for '/:id'.

Examples

This creates the homepage at URL '/'

Remix

// File: app/routes/index.jsx
export default function Home() {
  return <h1>Welcome to the homepage!</h1>;
}

This creates a page at '/about'

Remix

// File: app/routes/about.jsx
export default function About() {
  return <p>This is the about page.</p>;
}

This creates a dynamic route for posts like '/posts/123', showing the post ID.

Remix

// File: app/routes/posts/[postId].jsx
import { useParams } from '@remix-run/react';

export default function Post() {
  const { postId } = useParams();
  return <p>Showing post {postId}</p>;
}

Sample Program

This example shows three routes: the homepage at '/', a contact page at '/contact', and a dynamic product page at '/products/:productId'.

Remix

// File: app/routes/index.jsx
export default function Index() {
  return <h1>Home Page</h1>;
}

// File: app/routes/contact.jsx
export default function Contact() {
  return <h1>Contact Us</h1>;
}

// File: app/routes/products/[productId].jsx
import { useParams } from '@remix-run/react';

export default function Product() {
  const { productId } = useParams();
  return <h1>Product ID: {productId}</h1>;
}

Important Notes

Remember to restart your Remix dev server if new route files don't appear immediately.

Use nested folders inside 'app/routes' to create nested URLs, like 'app/routes/blog/posts.jsx' for '/blog/posts'.

Summary

Routes are created by adding files in the 'app/routes' folder.

File names match URL paths; use '[param]' for dynamic parts.

Each route file exports a React component that renders the page.