React Router overview - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the main React Router component for routing.

React

import { [1] } from 'react-router-dom';

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

AuseEffect

BuseState

CBrowserRouter

DReactDOM

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks like useState instead of router components.

Confusing ReactDOM with routing components.

The BrowserRouter component is the main router component that enables routing in React apps.

2fill in blank

medium

Complete the code to define a route that renders the Home component at the root path.

React

<Route path='[1]' element={<Home />} />

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

A/

B/home

C/index

D/main

Attempts:

3 left

💡 Hint

Common Mistakes

Using '/home' instead of '/' for the root path.

Confusing path names with component names.

The root path '/' matches the home page URL.

3fill in blank

hard

Fix the error in the code to correctly render the routes inside the router.

React

return (
  <BrowserRouter>
    <[1]>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
    </[1]>
  </BrowserRouter>
);

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

ARoutes

BSwitch

CRouter

DRoute

Attempts:

3 left

💡 Hint

Common Mistakes

Using which is deprecated in React Router v6.

Using as a wrapper instead of .

The Routes component wraps all Route elements in React Router v6+.

4fill in blank

hard

Fill both blanks to create a link that navigates to the About page.

React

<[1] to='[2]'>About</[1]>

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

ALink

BNavLink

C/about

D/contact

Attempts:

3 left

💡 Hint

Common Mistakes

Using when is sufficient here.

Setting the wrong path in the 'to' attribute.

The Link component creates navigation links, and the to prop sets the target path.

5fill in blank

hard

Fill all three blanks to extract the 'id' parameter from the URL using React Router hooks.

React

import { [1] } from 'react-router-dom';

function Item() {
  const params = [2]();
  return <p>Item ID: {params.[3]</p>;
}

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

AuseParams

BuseLocation

Cid

Dpathname

Attempts:

3 left

💡 Hint

Common Mistakes

Using useLocation which returns the URL object, not params.

Accessing 'pathname' instead of the parameter name.

The useParams hook returns URL parameters as an object. Access the 'id' parameter to show it.