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.