Creating routes in Remix - Visual Walkthrough

Concept Flow - Creating routes

Start Remix App

↓

Create Route File

↓

Define Route Component

↓

Save File in routes/ folder

↓

Remix Detects Route

↓

Route Available at URL

↓

User Visits URL -> Route Renders

This flow shows how Remix uses files in the routes folder to create web routes automatically.

Execution Sample

Remix

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

// Save as routes/about.jsx

Defines a simple About page component that Remix uses as a route at /about.

Execution Table

Step	Action	File/URL	Result
1	Create file routes/about.jsx	routes/about.jsx	File exists with About component
2	Remix scans routes folder	routes/about.jsx	Detects 'about' route
3	User visits /about URL	/about	Remix renders About component
4	Component renders <h1>About Page</h1>	/about	Page shows heading 'About Page'
5	User visits / (root)	/	No about.jsx route, default or index route renders
6	Exit	-	No more routes to process

💡 All route files processed and user requests handled

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
routes/about.jsx	does not exist	created with About component	detected as route	used to render /about	remains available for /about requests

Key Moments - 2 Insights

Why does Remix create a route automatically when I add a file in routes/?

Remix uses file-based routing. Each file in routes/ becomes a route URL matching the file name, as shown in steps 1 and 2 of the execution table.

What happens if I visit a URL that has no matching route file?

Remix shows a 404 or the default route if defined. Step 5 shows visiting / which has no about.jsx route, so it renders a different route or fallback.

Visual Quiz - 3 Questions

Look at the execution table, what happens at Step 3?

A Remix renders the About component for /about URL

B Remix creates a new route file

C User creates a new file

D Remix deletes the about.jsx file

💡 Hint

Check Step 3 in execution_table where user visits /about and Remix renders the component

At which step does Remix detect the new route file?

A Step 1

B Step 4

C Step 2

D Step 5

💡 Hint

Look at Step 2 in execution_table where Remix scans routes and detects the route

If you rename routes/about.jsx to routes/contact.jsx, what changes in the execution?

A Route URL stays /about

B Route URL changes from /about to /contact

C Remix breaks and shows error

D No route is created

💡 Hint

File name controls route URL as explained in concept_flow and variable_tracker

Concept Snapshot

Remix creates routes from files in the routes/ folder.
Each file exports a React component.
File name matches the URL path.
Save a file like routes/about.jsx to get /about route.
Visit URL to see the component rendered automatically.

Full Transcript

In Remix, routes are created by adding files inside the routes folder. Each file name becomes a URL path. For example, a file named about.jsx creates a route at /about. When you visit that URL, Remix renders the React component exported from that file. Remix automatically detects new route files when you save them. If you visit a URL without a matching route file, Remix shows a default page or 404. This makes routing simple and automatic by just managing files.