How Routing Works in Remix: Simple Guide with Examples

In Remix, routing works by creating files and folders inside the app/routes directory that map directly to URL paths. Each route file exports a React component that renders when the URL matches its path, enabling nested and dynamic routes with simple file naming conventions.

Syntax

Remix uses a file-based routing system where the folder and file names inside app/routes define the URL paths. Key parts include:

• index.tsx or index.jsx: Represents the root of a folder path.
• Folders: Represent nested routes.
• Dynamic segments: Use $param in file or folder names to capture URL parameters.
• Route components: Export a default React component to render UI for that route.

plaintext

app/routes/
├── index.tsx       // renders at '/' path
├── about.tsx       // renders at '/about'
├── blog/
│   ├── index.tsx   // renders at '/blog'
│   └── $postId.tsx // renders at '/blog/:postId' dynamic route

Example

This example shows a simple Remix app with a home page, about page, and a dynamic blog post page. The dynamic route captures the postId from the URL and displays it.

tsx

/* app/routes/index.tsx */
import { Link } from '@remix-run/react';
export default function Index() {
  return (
    <main>
      <h1>Welcome to Remix</h1>
      <nav>
        <Link to="/about">About</Link> | <Link to="/blog/123">Blog Post 123</Link>
      </nav>
    </main>
  );
}

/* app/routes/about.tsx */
export default function About() {
  return <h1>About Page</h1>;
}

/* app/routes/blog/$postId.tsx */
import { useParams } from '@remix-run/react';
export default function BlogPost() {
  const params = useParams();
  return <h1>Blog Post ID: {params.postId}</h1>;
}

Output

<h1>Welcome to Remix</h1> with navigation links; clicking 'About' shows <h1>About Page</h1>; clicking 'Blog Post 123' shows <h1>Blog Post ID: 123</h1>

Common Pitfalls

Common mistakes when working with Remix routing include:

• Not using index.tsx for root routes inside folders, causing unexpected 404s.
• Forgetting to prefix dynamic segments with $, so parameters won't be captured.
• Not exporting a default React component from route files, which breaks rendering.
• Misnaming files or folders with uppercase letters, which can cause issues on some file systems.

tsx

/* Wrong: dynamic segment missing $ */
// app/routes/blog/postId.tsx
export default function BlogPost() {
  return <h1>This will NOT capture postId param</h1>;
}

/* Right: dynamic segment with $ */
// app/routes/blog/$postId.tsx
import { useParams } from '@remix-run/react';
export default function BlogPost() {
  const { postId } = useParams();
  return <h1>Post ID: {postId}</h1>;
}

Quick Reference

Routing Concept	Description	Example
Root route	File named index.tsx at root of routes	app/routes/index.tsx → '/'
Nested route	Folder with index.tsx inside	app/routes/blog/index.tsx → '/blog'
Dynamic route	File or folder with $ prefix	app/routes/blog/$postId.tsx → '/blog/:postId'
Route component	Default export React component	export default function() { return ... }
Linking	Use from remix to navigate	About

Key Takeaways

Remix routing is file-based: folder and file names map to URL paths automatically.

Use index.tsx for root routes and $param for dynamic URL segments.

Each route file must export a default React component to render content.

Nested folders create nested routes and layouts.

Use Remix's component for client-side navigation.