Route parameters in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a route with a parameter named 'id'.

React

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/[1]" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

Drag options to blanks, or click blank then click option'

A*id

B/id

C{id}

D:id

Attempts:

3 left

💡 Hint

Common Mistakes

Using slashes or braces instead of a colon for parameters.

Forgetting the colon before the parameter name.

In React Router, route parameters are defined with a colon before the parameter name, like :id.

2fill in blank

medium

Complete the code to access the 'id' parameter inside the User component using React Router hooks.

React

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

function User() {
  const params = [1]();
  return <h1>User ID: {params.id}</h1>;
}

Drag options to blanks, or click blank then click option'

AuseRouteMatch

BuseLocation

CuseParams

DuseNavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using hooks that do not provide route parameters like useLocation or useNavigate.

Trying to access params without using the hook.

The useParams hook returns an object of route parameters. Here, params.id accesses the 'id' parameter.

3fill in blank

hard

Fix the error in the code to correctly extract the 'postId' parameter from the URL.

React

function Post() {
  const { [1] } = useParams();
  return <div>Post ID: {postId}</div>;
}

Drag options to blanks, or click blank then click option'

ApostId

Bid

Cpostid

Dpost_id

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect casing like 'postid' or 'post_id'.

Using a different parameter name than defined in the route.

The parameter name must exactly match the route parameter name, which is 'postId' here.

4fill in blank

hard

Fill both blanks to create a route for 'productId' and access it inside the Product component.

React

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

function Product() {
  const { [1] } = useParams();
  return <p>Product: {productId}</p>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/product/[2]" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

Drag options to blanks, or click blank then click option'

AproductId

B:id

C:productId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatch between parameter names in route and component.

Forgetting the colon in the route path parameter.

The route parameter is named 'productId', so the path uses ':productId' and the component extracts 'productId' from useParams().

5fill in blank

hard

Fill all three blanks to create a route with two parameters and access them inside the Order component.

React

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

function Order() {
  const { [1], [2] } = useParams();
  return <div>Order {orderId} for user {userId}</div>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/order/[3]/:userId" element={<Order />} />
      </Routes>
    </BrowserRouter>
  );
}

Drag options to blanks, or click blank then click option'

AorderId

BuserId

C:orderId

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent parameter names between route and component.

Forgetting the colon before parameters in the route path.

The route has two parameters: 'orderId' and 'userId'. The path uses ':orderId' and ':userId'. The component extracts both from useParams().