Remix Routing Conventions — File-Based Routing System

In this tutorial, you will learn about Remix Routing Conventions. We cover key concepts, practical examples, and best practices to help you master this topic.

Learn Remix routing conventions: file-based routes, dynamic segments, nested routes, route groups, and URL parameter handling for full-stack apps.

In this lesson, you'll understand how Remix maps file names to URLs, create dynamic and nested routes, and use route groups for organized file structures.

What You'll Learn

File-based routing rules, dynamic segment syntax, nested route patterns, route grouping with parentheses, and how the Outlet component works.

Why It Matters

Routing is the foundation of any web app. Understanding Remix's file conventions prevents 404 errors and enables correct parent-child route nesting.

Real-World Use

DodaZIP's admin panel uses nested routes for settings pages, where the parent layout renders tabs and the child renders tab content.

flowchart TD
    A[app/routes/] --> B["_index.tsx (/)"]
    A --> C["about.tsx (/about)"]
    A --> D["dashboard.tsx (/dashboard)"]
    A --> E["dashboard.settings.tsx (/dashboard/settings)"]
    A --> F["blog.$slug.tsx (/blog/:slug)"]
    style A fill:#121212,color:#fff

Basic Routes

Dynamic Segments

Use $ prefix for dynamic params:

Access params with useParams():

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

export default function BlogPost() {
  const { slug } = useParams();
  return <h1>Blog: {slug}</h1>;
}

Nested Routes with Dots

Dots in filenames create nesting with layouts:

dashboard.tsx (parent layout):

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

export default function Dashboard() {
  return (
    <div>
      <nav>Dashboard Nav</nav>
      <Outlet /> {/* Child renders here */}
    </div>
  );
}

dashboard.settings.tsx (child):

export default function Settings() {
  return <h1>Settings</h1>;
}

/dashboard/settings renders the parent nav with the settings heading inside <Outlet />.

Route Groups

Use parentheses to group routes without affecting the URL:

app/routes/
  (auth)/
    login.tsx
    register.tsx
  (main)/
    dashboard.tsx
    profile.tsx

This organizes files into folders without adding /auth/ or /main/ to the URL.

Optional Segments

Use $ with a question mark for optional params:

blog.$slug.tsx requires a slug. blog.$slug?.tsx makes it optional.

Common Mistakes

1. Using underscores incorrectly: _index.tsx is the root route. _layout.tsx does NOT create a layout—use dots for nesting.
2. Forgetting <Outlet /> in parent routes: Nested child routes don't render unless the parent includes <Outlet />.
3. Mixing dots and slashes: dashboard/settings is NOT valid. Use dashboard.settings.tsx for nesting.
4. Putting routes in subdirectories without layout files: A subdirectory without a .tsx file of the same name won't create a parent layout.
5. Over-nesting routes: More than 3 levels of nesting makes the URL deep and routes hard to manage.

Practice Questions

1. How do you create a route for /blog/my-post? Answer: Create app/routes/blog.$slug.tsx. Access the slug via useParams().slug.

2. What does the dot in dashboard.settings.tsx mean? Answer: It creates a nested route. dashboard.settings.tsx is a child of dashboard.tsx.

3. What component must a parent route include for children? Answer: <Outlet /> from @remix-run/react. Child routes render inside this component.

4. What does the $ prefix in filenames signify? Answer: A dynamic segment. The value is passed as a URL parameter.

Challenge

Create a nested route structure for a project management app: projects.tsx (list), projects.$id.tsx (project detail with tabs), and projects.$id.settings.tsx (settings tab).

Mini Project

Build a blog with routes for the homepage, blog list (/blog), individual posts (/blog/$slug), author pages (/authors/$authorId), and an about page.

FAQ

What's Next

Learn about Remix Nested Routes for building complex layouts with automatic data loading.