Route parameters in React - Step-by-Step Execution

Concept Flow - Route parameters

User visits URL with parameter

↓

React Router matches route pattern

↓

Extract parameter from URL

↓

Pass parameter to component

↓

Component uses parameter to render content

When a user visits a URL with a parameter, React Router matches the route, extracts the parameter, and passes it to the component to customize what it shows.

Execution Sample

React

import { useParams } from 'react-router-dom';

function User() {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
}

export default User;

This React component gets the 'id' parameter from the URL and shows it on the page.

Execution Table

Step	URL Visited	Route Pattern	Parameter Extracted	Component Render Output
1	/user/42	/user/:id	id = '42'	<h1>User ID: 42</h1>
2	/user/abc	/user/:id	id = 'abc'	<h1>User ID: abc</h1>
3	/user/	/user/:id	No match	No render or fallback
4	/user/123/profile	/user/:id	id = '123'	Depends on route config
Exit	N/A	N/A	N/A	No further matching

💡 Execution stops when URL does not match the route pattern or no parameter is found.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
id	undefined	'42'	'abc'	undefined	depends on URL

Key Moments - 2 Insights

Why does the component not render when the URL is '/user/'?

Because the route pattern '/user/:id' expects a parameter after '/user/'. Without it, React Router does not match the route, so the component does not render. See execution_table row 3.

What happens if the URL has extra parts like '/user/123/profile'?

It depends on how routes are configured. If the route matches only '/user/:id', extra parts may prevent matching or require nested routes. See execution_table row 4.

Visual Quiz - 3 Questions

Look at the execution table. What is the value of 'id' when the URL is '/user/abc'?

A '42'

B undefined

C 'abc'

D null

💡 Hint

Check execution_table row 2 under 'Parameter Extracted'

At which step does the route fail to match and the component not render?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look at execution_table row 3 where 'No match' is noted

If the URL changes to '/user/99', what will the component render?

A No render

B <h1>User ID: 99</h1>

C <h1>User ID: 42</h1>

D <h1>User ID: abc</h1>

💡 Hint

Based on variable_tracker, 'id' matches the URL parameter

Concept Snapshot

Route parameters let React Router extract parts of the URL.
Use ':paramName' in route paths to define parameters.
Inside components, use useParams() hook to get parameters.
Parameters are strings from the URL used to customize rendering.
If URL doesn't match pattern, component won't render.
Extra URL parts may affect matching depending on route setup.

Full Transcript

Route parameters in React Router allow parts of the URL to be dynamic. When a user visits a URL like '/user/42', React Router matches the route pattern '/user/:id' and extracts '42' as the 'id' parameter. The component then uses the useParams hook to access 'id' and display it. If the URL lacks the parameter, like '/user/', the route does not match and the component does not render. Extra URL parts may require additional route configuration. This visual trace shows how the parameter changes with different URLs and how the component output updates accordingly.

Practice

1. What does the useParams() hook in React Router do?

easy

A. It sets new route paths dynamically.

B. It retrieves the dynamic parameters from the current URL.

C. It navigates to a different route programmatically.

D. It renders a list of all available routes.

Solution

1. Step 1: Understand the purpose of useParams()

   This hook is designed to extract parameters defined in the route path from the URL.

2. Step 2: Compare with other options

   Options A, C, and D describe different React Router features, not useParams().

3. Final Answer:

   It retrieves the dynamic parameters from the current URL. -> Option B

4. Quick Check:

   useParams() = get URL parameters [OK]

Hint: Remember: useParams() reads URL values, not changes routes. [OK]

Common Mistakes:

• Confusing useParams() with navigation functions like useNavigate()
• Thinking useParams() sets or changes routes
• Assuming useParams() returns all routes instead of parameters

2. Which of the following is the correct way to define a route with a parameter named postId in React Router?

easy

A. <Route path="/post/:postId" element={<Post />} />

B. <Route path="/post/*postId" element={<Post />} />

C. <Route path="/post/postId" element={<Post />} />

D. <Route path="/post/{postId}" element={<Post />} />

Solution

1. Step 1: Identify parameter syntax in route paths

   React Router uses a colon : before the parameter name to define dynamic segments.

2. Step 2: Check each option

   <Route path="/post/:postId" element={<Post />} /> correctly uses /:postId. Options A, B, and D use incorrect syntax.

3. Final Answer:

   <Route path="/post/:postId" element={<Post />} /> -> Option A

4. Quick Check:

   Parameter syntax = colon before name [OK]

Hint: Use colon before parameter name in route path. [OK]

Common Mistakes:

• Omitting the colon before parameter name
• Using curly braces or asterisk instead of colon
• Confusing parameter syntax with query strings

3. Given the route <Route path="/profile/:username" element={<Profile />} /> and the URL /profile/jane_doe, what will useParams() return inside the Profile component?

medium

A. {"username": ":jane_doe"}

B. {"profile": "jane_doe"}

C. {"username": "jane_doe"}

D. {} (empty object)

Solution

1. Step 1: Match URL segment to route parameter

   The route defines :username as a parameter. The URL /profile/jane_doe assigns "jane_doe" to this parameter.

2. Step 2: Understand useParams() output

   useParams() returns an object with keys as parameter names and values as the matched URL parts.

3. Final Answer:

   {"username": "jane_doe"} -> Option C

4. Quick Check:

   useParams() returns {paramName: value} [OK]

Hint: useParams() keys match route parameters exactly. [OK]

Common Mistakes:

• Including colon in parameter value
• Using wrong parameter name as key
• Expecting empty object when parameter exists

4. Consider this code snippet inside a React Router app:

const params = useParams();
console.log(params.id);

But the route is defined as <Route path="/product/:productId" element={<Product />} />. What is the problem?

medium

A. The parameter name used in useParams() does not match the route parameter name.

B. useParams() cannot be used inside functional components.

C. The route path should not have a colon before the parameter name.

D. The element prop must be a string, not a component.

Solution

1. Step 1: Compare parameter names in route and code

   The route defines parameter as productId, but code accesses params.id.

2. Step 2: Understand useParams() object keys

   useParams() keys exactly match route parameter names, so params.id is undefined here.

3. Final Answer:

   The parameter name used in useParams() does not match the route parameter name. -> Option A

4. Quick Check:

   Param names must match exactly [OK]

Hint: Check parameter names match exactly in route and useParams(). [OK]

Common Mistakes:

• Assuming useParams() keys are generic like 'id'
• Thinking useParams() works outside components
• Misunderstanding route parameter syntax

5. You want to create a route that shows a user's post by user ID and post ID, like /user/42/post/7. Which route path and useParams() usage correctly extract both parameters inside the component?

hard

A. <Route path="/user/:userId/post/:postId" element={<UserPost />} />Inside component: const [userId, postId] = useParams();

B. <Route path="/user/:userId/post/:postId" element={<UserPost />} />Inside component: const params = useParams(); const user = params.user; const post = params.post;

C. <Route path="/user/:userId/post/:postId" element={<UserPost />} />Inside component: const { id1, id2 } = useParams();

D. <Route path="/user/:userId/post/:postId" element={<UserPost />} />Inside component: const { userId, postId } = useParams();

Solution

1. Step 1: Define route with multiple parameters

   The route path correctly uses :userId and :postId to capture both values.

2. Step 2: Correctly extract parameters inside component

   useParams() returns an object, so destructuring with matching keys { userId, postId } is correct. Options A, B, and C misuse keys or destructuring.

3. Final Answer:

   <Route path="/user/:userId/post/:postId" element={<UserPost />} /> with const { userId, postId } = useParams(); -> Option D

4. Quick Check:

   Multiple params = multiple keys in useParams() object [OK]

Hint: Destructure useParams() with exact route parameter names. [OK]

Common Mistakes:

• Using wrong keys when destructuring useParams()
• Trying to destructure useParams() as an array
• Accessing non-existent keys from useParams()