Creating routes in Remix - Mechanics & Internals

Overview - Creating routes

What is it?

Creating routes in Remix means defining the different pages or views your web app can show. Each route corresponds to a URL path and tells Remix what content to display when someone visits that path. Routes are created by adding files or folders in a special directory, and Remix automatically turns them into pages. This makes building navigation simple and organized.

Why it matters

Without routes, a web app would be like a book with no chapters or table of contents — users wouldn't know how to find different pages or features. Routes let users move around your app easily and help developers organize code by page. Remix's routing system also handles loading data and rendering pages efficiently, making apps faster and smoother.

Where it fits

Before learning routes, you should understand basic React components and file structure. After mastering routes, you can learn nested routing, data loading with loaders, and advanced features like route actions and error boundaries. Routes are a core part of building any Remix app.

Mental Model

Core Idea

Routes in Remix map URL paths to files in your project, letting the app show the right page when a user visits a link.

Think of it like...

Think of routes like street addresses in a city. Each address points to a specific house (page). When you enter an address, you arrive at the right house without confusion.

┌───────────────┐
│  routes/      │
│ ├── index.jsx │  <-- '/' home page
│ ├── about.jsx │  <-- '/about' page
│ └── blog/     │
│     ├── index.jsx  <-- '/blog' page
│     └── $postId.jsx <-- '/blog/:postId' dynamic page
└───────────────┘

Build-Up - 7 Steps

1

Foundation

Basic route file creation

Concept: Routes are created by adding files inside the routes folder.

In Remix, you create a route by adding a file inside the 'app/routes' folder. For example, 'app/routes/index.jsx' becomes the home page at '/'. The file exports a React component that renders the page content.

Result

Visiting '/' in the browser shows the content from 'index.jsx'.

Understanding that file names directly become URLs helps you organize your app structure naturally.

2

Foundation

Route paths from filenames

Concept: File and folder names define the URL path structure.

A file named 'about.jsx' inside 'routes' becomes '/about'. A folder named 'blog' with 'index.jsx' inside becomes '/blog'. Remix uses the folder and file names to build the full URL path automatically.

Result

Visiting '/about' shows 'about.jsx' content; '/blog' shows 'blog/index.jsx' content.

Knowing that folders and files map to URL parts lets you plan your app's navigation by organizing files.

3

Intermediate

Dynamic routes with parameters

🤔Before reading on: do you think dynamic routes use special file names or special code inside components? Commit to your answer.

Concept: Dynamic parts of URLs are created by naming files or folders with $ prefix.

To create a route that changes based on a value, like a blog post ID, name the file with a $ prefix, e.g., '$postId.jsx'. This matches URLs like '/blog/123' or '/blog/hello'. Inside the component, you can access the parameter to load specific data.

Result

Visiting '/blog/123' renders the component in '$postId.jsx' with 'postId' equal to '123'.

Understanding that $ in filenames creates dynamic URL parts unlocks powerful, flexible routing.

4

Intermediate

Nested routes with folders

🤔Before reading on: do you think nested routes require special code or just folder structure? Commit to your answer.

Concept: Folders inside routes create nested URL paths and nested UI layouts.

By placing route files inside folders, you create nested routes. For example, 'routes/blog/index.jsx' is '/blog', and 'routes/blog/$postId.jsx' is '/blog/:postId'. Remix also lets you nest layouts by using 'Outlet' components inside parent routes.

Result

Visiting '/blog/123' shows the nested page inside the blog layout.

Knowing that folder structure controls nesting helps you build complex apps with shared layouts easily.

5

Intermediate

Index routes for default pages

Concept: Files named 'index.jsx' inside folders become the default page for that folder's path.

When you have a folder like 'routes/blog', the file 'index.jsx' inside it becomes the page shown at '/blog'. This is called an index route. It lets you have a default page for a section, separate from dynamic or nested routes.

Result

Visiting '/blog' shows the content from 'blog/index.jsx'.

Recognizing index routes helps you organize default views for sections without extra URL parts.

6

Advanced

Route modules exporting loaders and actions

🤔Before reading on: do you think routes only export React components or can they export other functions? Commit to your answer.

Concept: Routes can export special functions to load data or handle form submissions.

Besides the React component, a route file can export a 'loader' function to fetch data before rendering, and an 'action' function to handle form submissions or mutations. Remix calls these automatically based on the request type.

Result

Pages load data before showing, and forms submit without extra client code.

Understanding that routes handle data loading and mutations centralizes logic and improves app performance.

7

Expert

Route conventions and file naming edge cases

🤔Before reading on: do you think Remix allows dots, underscores, or special characters in route filenames? Commit to your answer.

Concept: Remix has specific rules and conventions for route file names, including special files like '_index.jsx' and handling dots.

Remix treats files starting with underscore (_) as special, like '_index.jsx' which can override default index behavior. Dots in filenames can create nested routes or extensions. Understanding these conventions helps avoid conflicts and enables advanced routing patterns.

Result

You can create complex route structures and control route matching precisely.

Knowing these naming rules prevents subtle bugs and unlocks advanced routing capabilities.

Under the Hood

Remix uses the file system inside the 'routes' folder to build a route manifest at build time. Each file or folder corresponds to a route segment. When a user visits a URL, Remix matches the path segments to this manifest, loads the route module, runs any loader or action functions, then renders the React component. This process is optimized for server-side rendering and client transitions.

Why designed this way?

Remix chose file-based routing to simplify route management and reduce boilerplate. This approach leverages the natural organization of files, making routes easy to find and maintain. Alternatives like manual route definitions were more error-prone and verbose. The design balances developer experience and performance.

┌───────────────┐
│ routes/       │
│ ├─ index.jsx  │
│ ├─ about.jsx  │
│ ├─ blog/      │
│ │  ├─ index.jsx
│ │  └─ $postId.jsx
└─┬─────────────┘
  │
  ▼
┌─────────────────────────────┐
│ Remix builds route manifest  │
│ mapping URLs to files        │
└─────────────────────────────┘
  │
  ▼
┌─────────────────────────────┐
│ On request:                  │
│ 1. Match URL to route        │
│ 2. Run loader/action if any  │
│ 3. Render React component    │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think a route file named 'home.jsx' automatically becomes '/'? Commit to yes or no.

Common Belief: Any file named 'home.jsx' inside routes becomes the home page at '/'.

Reality: Only 'index.jsx' inside the routes folder maps to '/'. 'home.jsx' becomes '/home'.

Why it matters: Misnaming the home route causes users to get 404 errors or unexpected URLs, breaking navigation.

Quick: Do you think dynamic route parameters can be optional by default? Commit to yes or no.

Common Belief: Dynamic route parameters like '$id.jsx' are optional and match URLs with or without the parameter.

Reality: Dynamic parameters are required; the URL must include that segment to match the route.

Why it matters: Assuming optional parameters can cause routes not to match and pages not to load as expected.

Quick: Do you think nested routes always render their parent layouts automatically? Commit to yes or no.

Common Belief: Nested routes automatically show the parent route's layout without extra code.

Reality: You must include an 'Outlet' component in the parent route to render child routes.

Why it matters: Forgetting 'Outlet' leads to child routes not rendering, causing blank pages or missing content.

Quick: Do you think route files can export any function and Remix will run it? Commit to yes or no.

Common Belief: Any function exported from a route file will be called by Remix automatically.

Reality: Only specific exports like 'loader', 'action', 'meta', and 'headers' are recognized and run by Remix.

Why it matters: Exporting functions without knowing this can cause confusion and unused code.

Expert Zone

1

Routes with the same path segment but different HTTP methods can share the same file using loader and action exports, enabling RESTful patterns.

2

Using nested routes with shared layouts and error boundaries allows fine-grained control over UI and error handling, improving user experience.

3

Route file naming conventions like '_index.jsx' can override default index behavior, useful for complex route matching and fallback pages.

When NOT to use

File-based routing is great for most apps but can be limiting if you need dynamic route creation at runtime or very custom matching logic. In those cases, consider using a manual route configuration or a different framework that supports runtime route definitions.

Production Patterns

In production Remix apps, routes are organized by feature folders with nested layouts. Data loading is centralized in loaders for SEO and performance. Dynamic routes handle user-generated content like profiles or posts. Error boundaries are placed at route levels to catch and display errors gracefully.

Connections

REST API endpoints

Routes in Remix map URLs to UI pages, similar to how REST endpoints map URLs to data operations.

Understanding routing in Remix helps grasp how web servers organize resources and actions by URL paths.

File system hierarchy

Remix routing uses the file system structure to define URL paths.

Knowing how file systems organize folders and files clarifies how Remix builds routes automatically.

Urban city planning

Routing is like planning streets and addresses in a city to guide people to destinations.

Seeing routes as addresses helps understand the importance of clear, logical structure for navigation.

Common Pitfalls

#1 Creating a route file with the wrong name for the home page.

Wrong approach:

app/routes/home.jsx
export default function Home() { return Home; }

Correct approach:

app/routes/index.jsx
export default function Home() { return Home; }

Root cause:

Confusing the special 'index.jsx' filename that maps to '/' with any file named 'home.jsx'.

#2 Forgetting to add in parent route for nested routes.

Wrong approach:

export default function Blog() { return Blog Section; }

Correct approach:

import { Outlet } from '@remix-run/react';
export default function Blog() { return Blog Section; }

Root cause:

Not realizing that nested child routes render inside the parent's Outlet component.

#3 Using dynamic route parameter without $ prefix.

Wrong approach:

app/routes/blog/postId.jsx
export default function Post() { return Post; }

Correct approach:

app/routes/blog/$postId.jsx
export default function Post() { return Post; }

Root cause:

Missing the $ prefix that tells Remix this part of the URL is dynamic.

Key Takeaways

Remix creates routes by matching URL paths to files and folders inside the 'routes' directory.

File and folder names directly define the URL structure, with 'index.jsx' as the default page for a path.

Dynamic routes use filenames starting with '$' to capture URL parameters for flexible pages.

Nested routes require an 'Outlet' component in the parent to render child routes properly.

Routes can export special functions like loaders and actions to handle data loading and form submissions.

Practice

1. In Remix, how do you create a new route that matches the URL path /about?

easy

A. Create a file named about.jsx inside the app/routes folder.

B. Add a function named about() in app/root.jsx.

C. Create a folder named about inside app/components.

D. Add a route entry in a routes configuration file.

Solution

1. Step 1: Understand Remix routing structure

   Remix creates routes based on files inside the app/routes folder.

2. Step 2: Match file name to URL path

   To create a route for /about, create about.jsx inside app/routes.

3. Final Answer:

   Create a file named about.jsx inside the app/routes folder. -> Option A

4. Quick Check:

   Route file name = URL path [OK]

Hint: Route files in app/routes match URL paths directly [OK]

Common Mistakes:

• Trying to add routes in root.jsx instead of app/routes folder
• Creating route files in app/components folder
• Expecting a config file for routes

2. Which of the following is the correct way to define a dynamic route parameter for a user ID in Remix?

easy

A. Create a file named user-$id.jsx inside app/routes.

B. Create a file named user/[id].jsx inside app/routes.

C. Create a file named user/:id.jsx inside app/routes.

D. Create a file named user/{id}.jsx inside app/routes.

Solution

1. Step 1: Recall Remix dynamic route syntax

   Remix uses square brackets [param] in file names to define dynamic route parts.

2. Step 2: Match dynamic user ID route

   For a user ID parameter, the file should be named user/[id].jsx.

3. Final Answer:

   Create a file named user/[id].jsx inside app/routes. -> Option B

4. Quick Check:

   Dynamic route uses [param] syntax [OK]

Hint: Use square brackets [param] for dynamic route files [OK]

Common Mistakes:

• Using $id or :id instead of [id]
• Using curly braces {id} which is invalid
• Placing dynamic routes outside app/routes

3. Given the file app/routes/blog/[slug].jsx exporting a React component that renders <h1>{params.slug}</h1>, what will be rendered when visiting /blog/hello-world?

medium

A. Nothing, route not found

B. [slug]

C. blog/hello-world

D. hello-world

Solution

1. Step 1: Understand dynamic route parameter usage

   The file [slug].jsx captures the URL part after /blog/ as slug.

2. Step 2: Rendered output for /blog/hello-world

   The component renders <h1>{params.slug}</h1>, so params.slug is hello-world.

3. Final Answer:

   <h1>hello-world</h1> -> Option D

4. Quick Check:

   Dynamic param value = hello-world [OK]

Hint: Dynamic route param matches URL segment inside [brackets] [OK]

Common Mistakes:

• Expecting literal [slug] text to render
• Confusing full path with param value
• Assuming route does not exist

4. You created a file app/routes/profile.jsx but visiting /profile shows a 404 error. What is the most likely cause?

medium

A. The file does not export a React component as default.

B. The file name should be profile.js instead of profile.jsx.

C. You need to add a route entry in a config file.

D. The route path should be /profiles to match the file.

Solution

1. Step 1: Check route file export requirements

   Remix requires route files to export a React component as the default export.

2. Step 2: Identify cause of 404 error

   If the file exists but does not export a default React component, Remix treats it as no route, causing 404.

3. Final Answer:

   The file does not export a React component as default. -> Option A

4. Quick Check:

   Default export React component required [OK]

Hint: Always export a default React component in route files [OK]

Common Mistakes:

• Using named exports only without default export
• Wrong file extension causing import issues
• Expecting config file for routes

5. You want to create nested routes for a blog: /blog shows a list, and /blog/[postId] shows a post detail. How should you organize files in app/routes?

hard

A. Create blog.jsx and blog/[postId].jsx inside app/routes.

B. Create blog/index.jsx and blog-postId.jsx inside app/routes.

C. Create a folder blog with index.jsx and [postId].jsx inside it.

D. Create blog-list.jsx and blog-post.jsx inside app/routes.

Solution

1. Step 1: Understand nested route folder structure

   Remix supports nested routes by creating folders with an index.jsx file for the base path.

2. Step 2: Organize blog routes

   Put index.jsx inside blog folder for /blog, and [postId].jsx for dynamic post detail.

3. Final Answer:

   Create a folder blog with index.jsx and [postId].jsx inside it. -> Option C

4. Quick Check:

   Nested routes use folders with index.jsx [OK]

Hint: Use folder with index.jsx for base route, dynamic files for params [OK]

Common Mistakes:

• Placing all files flat without folders for nested routes
• Using dash instead of brackets for dynamic routes
• Naming files incorrectly for nested paths