Route parameters in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output when accessing route parameters?

Consider a React Router setup where a component reads a route parameter. What will be rendered when the URL is /user/42?

React

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

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

// Route: <Route path="/user/:id" element={<User />} />

A User ID: 42

B User ID: id

C User ID: undefined

D Error: useParams is not a function

💡 Hint

Remember that useParams returns an object with keys matching the route parameters.

The useParams hook extracts the dynamic parts of the URL defined by the route. Here, :id matches 42, so id is '42'.

📝 Syntax

intermediate

Which option correctly defines a route with a parameter?

You want to create a route that matches URLs like /product/123 where 123 is a dynamic product ID. Which route definition is correct?

A <Route path="/product/:id" element={<Product />} />

B <Route path="/product/*id" element={<Product />} />

C <Route path="/product/{id}" element={<Product />} />

D <Route path="/product/id" element={<Product />} />

💡 Hint

Route parameters use a colon before the name.

In React Router, dynamic segments are defined with a colon, like ':id'.

❓ state_output

advanced

What is the value of the state after route parameter change?

Given the component below, what will be the displayed output after navigating from /post/1 to /post/2?

React

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

function Post() {
  const { postId } = useParams();
  const [id, setId] = useState(postId);

  useEffect(() => {
    setId(postId);
  }, [postId]);

  return <div>Post ID: {id}</div>;
}

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

A Post ID: undefined

B Post ID: 1

C Post ID: NaN

D Post ID: 2

💡 Hint

The effect updates the state when the parameter changes.

The useEffect hook runs when postId changes, updating the state to the new postId value.

🔧 Debug

advanced

Why does this component not update on route parameter change?

This component reads a route parameter but does not update when the URL changes. What is the cause?

React

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

function Profile() {
  const { userId } = useParams();
  const [id] = useState(userId);

  return <div>Profile ID: {id}</div>;
}

// Route: <Route path="/profile/:userId" element={<Profile />} />

A The route path is missing a colon before userId.

B The state is initialized once and does not update when userId changes.

C The component should use useEffect to fetch data.

D useParams does not return userId correctly.

💡 Hint

Think about how useState works with initial values.

useState sets the initial value only once. Changes in userId do not update the state unless explicitly handled.

🧠 Conceptual

expert

How does React Router handle multiple route parameters in nested routes?

Given nested routes with parameters, how are parameters accessed in child components?

React

/*
<Route path="/category/:catId" element={<Category />}> 
  <Route path="product/:prodId" element={<Product />} />
</Route>
*/

function Product() {
  const params = useParams();
  return <div>{`Category: ${params.catId}, Product: ${params.prodId}`}</div>;
}

A useParams returns parameters only if explicitly passed as props.

B useParams returns only the parameters from the current route segment.

C useParams returns all parameters from parent and child routes combined.

D useParams cannot be used in nested routes.

💡 Hint

React Router merges parameters from all matched routes.

useParams returns an object with all parameters from the matched route hierarchy, including parents.

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()