Route parameters in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are route parameters in React Router?

Route parameters are dynamic parts of a URL that allow you to capture values from the URL and use them inside your React components.

beginner

How do you define a route parameter in a React Router path?

You define a route parameter by adding a colon (:) before a name in the path, like /user/:id. The :id is the parameter.

beginner

How do you access route parameters inside a React component?

You use the useParams() hook from React Router. It returns an object with all route parameters as keys and their values from the URL.

beginner

Why are route parameters useful in web apps?

They let you create pages that change based on the URL, like showing details for different users or products without making separate routes for each.

beginner

Example: What will useParams() return if the URL is /product/42 and the route is /product/:productId?

It will return { productId: '42' }, so you can use productId inside your component to show product details.

How do you declare a route parameter in React Router?

A By wrapping the parameter name in curly braces, like /user/{id}

B By prefixing the parameter name with a colon, like /user/:id

C By adding a question mark after the parameter, like /user/id?

D By using a dollar sign before the parameter, like /user/$id

Route parameters are declared by prefixing the name with a colon (:), for example /user/:id.

Which React Router hook lets you access route parameters inside a component?

A useNavigate()

B useRoute()

C useLocation()

D useParams()

The useParams() hook returns an object with the current route parameters.

If your route path is /post/:postId and the URL is /post/10, what is the value of postId from useParams()?

A 10

B :postId

C post

D undefined

The postId parameter captures the value 10 from the URL.

Why use route parameters instead of separate routes for each item?

A To make URLs shorter

B To avoid using React Router

C To handle many dynamic pages with one route

D To disable navigation

Route parameters let you handle many dynamic pages with a single route definition.

What type of value does useParams() return?

A An object with keys as parameter names and values as strings from the URL

B A string with all parameters combined

C An array of parameter values

D A boolean indicating if parameters exist

useParams() returns an object where keys are parameter names and values are strings from the URL.

Explain how to use route parameters in React Router to show dynamic content based on the URL.

Think about how URLs like /user/123 can show different user info.

Describe the benefits of using route parameters in a React app.

Consider how many pages you can create with one route.