How to Create Routes in Remix: Simple Guide

In Remix, you create a route by adding a file inside the app/routes folder. Each file corresponds to a URL path, and you export a React component from that file to define what shows on that route.

Syntax

To create a route in Remix, add a file inside the app/routes folder. The file name defines the URL path. Export a React component as the default export to render the page content.

• app/routes/index.jsx → renders at /
• app/routes/about.jsx → renders at /about
• app/routes/blog/$postId.jsx → dynamic route at /blog/:postId

jsx

export default function RouteComponent() {
  return <h1>Hello from this route!</h1>;
}

Example

This example shows how to create a simple route at /hello that displays a greeting message.

jsx

// File: app/routes/hello.jsx
import React from 'react';

export default function HelloRoute() {
  return <h1>Hello, Remix Route!</h1>;
}

Output

Hello, Remix Route!

Common Pitfalls

Common mistakes when creating routes in Remix include:

• Not placing the route file inside app/routes folder.
• Forgetting to export a default React component from the route file.
• Using incorrect file names that don't match the desired URL path.
• Not handling dynamic routes properly with $ prefix.

Always ensure your route files are correctly named and export a default component.

jsx

// Wrong: Missing default export
// File: app/routes/wrong.jsx
function WrongRoute() {
  return <p>This will not work because it's not exported.</p>;
}

// Right: Default export
// File: app/routes/right.jsx
export default function RightRoute() {
  return <p>This works correctly.</p>;
}

Quick Reference

Route File Name	URL Path	Description
index.jsx	/	Root route
about.jsx	/about	Static route
blog/$postId.jsx	/blog/:postId	Dynamic route with parameter
$username/settings.jsx	/:username/settings	Nested dynamic route

Key Takeaways

Create routes by adding files inside the app/routes folder in Remix.

File names map directly to URL paths; use $ prefix for dynamic segments.

Always export a default React component from each route file.

Use index.jsx for the root path and nested folders for nested routes.

Check file placement and naming carefully to avoid routing errors.