Dynamic route parameters in Remix - Step-by-Step Execution

Concept Flow - Dynamic route parameters

User visits URL

↓

Remix router checks routes

↓

Match dynamic route pattern

↓

Extract parameter from URL

↓

Pass parameter to component

↓

Component renders with parameter

When a user visits a URL, Remix matches it to a route with dynamic parts, extracts those parts as parameters, and passes them to the component to render content based on them.

Execution Sample

Remix

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

export default function Post() {
  const params = useParams();
  return <h1>Post ID: {params.postId}</h1>;
}

// Route file: routes/posts/$postId.jsx

This code shows a Remix route with a dynamic parameter postId, which is extracted and displayed in the component.

Execution Table

Step	URL Visited	Route Pattern Matched	Parameter Extracted	Component Render Output
1	/posts/42	/posts/$postId	postId = '42'	<h1>Post ID: 42</h1>
2	/posts/abc	/posts/$postId	postId = 'abc'	<h1>Post ID: abc</h1>
3	/posts/	No match	No parameter	404 or no render

💡 Execution stops when no route matches the URL or after rendering the component with extracted parameters.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3
params.postId	undefined	'42'	'abc'	undefined

Key Moments - 2 Insights

Why does the component receive params.postId as a string, not a number?

Because URL parameters are always strings. See execution_table rows 1 and 2 where postId is '42' and 'abc' as strings.

What happens if the URL does not match the dynamic route pattern?

No parameter is extracted and the route does not render. See execution_table row 3 where '/posts/' has no match.

Visual Quiz - 3 Questions

Look at the execution table, what is params.postId when the URL is '/posts/42'?

A '42'

B 42 (number)

C undefined

D 'postId'

💡 Hint

Check execution_table row 1 under 'Parameter Extracted' and variable_tracker for params.postId.

At which step does the route fail to match and no parameter is extracted?

A Step 1

B Step 2

C Step 3

D No failure

💡 Hint

Look at execution_table row 3 where 'Route Pattern Matched' is 'No match'.

If the URL changes to '/posts/123', what will params.postId be?

A 123 (number)

B '123'

C undefined

D 'postId'

💡 Hint

Dynamic parameters are strings as shown in variable_tracker and execution_table.

Concept Snapshot

Dynamic route parameters in Remix use $paramName in route filenames.
When a URL matches, Remix extracts the param as a string.
Use useParams() hook to access these parameters in components.
This allows rendering dynamic content based on URL parts.
If no match, route does not render.

Full Transcript

In Remix, dynamic route parameters let you create routes that change based on parts of the URL. For example, a file named $postId.jsx inside routes/posts matches URLs like /posts/42 or /posts/abc. When a user visits such a URL, Remix extracts the dynamic part (postId) as a string and passes it to the component via the useParams() hook. The component can then use this parameter to show content specific to that ID. If the URL does not match the pattern, Remix does not render the route. This process helps build pages that respond to different URLs without writing many separate files.