Client-side routing concept in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

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

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

ARouter

BRoute

CBrowserRouter

DLink

Attempts:

3 left

💡 Hint

Common Mistakes

Using Route instead of BrowserRouter for wrapping the app.

Importing Link when you need the router component.

The BrowserRouter component is the main router that uses the browser's history API for client-side routing.

2fill in blank

medium

Complete the code to define a route for the home page path '/' with the Home component.

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 home page.

Confusing '/index' with the root path.

The root path '/' represents the home page in routing.

3fill in blank

hard

Fix the error in the code to navigate programmatically using the hook.

React

const navigate = [1]();

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

AuseRouter

BuseRoute

CuseHistory

DuseNavigate

Attempts:

3 left

💡 Hint

Common Mistakes

Using useHistory which is deprecated in React Router v6.

Using useRoute or useRouter which do not exist.

The useNavigate hook returns a function to change routes programmatically in React Router v6+.

4fill in blank

hard

Fill both blanks to create a link to the about page with accessible text.

React

<Link to=[1] aria-label=[2]>About Us</Link>

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

A"/about"

B"Go to About page"

C"/contact"

D"Navigate to contact page"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong path in the to prop.

Not providing an aria-label or using unclear text.

The to prop should point to the about page path "/about". The aria-label provides descriptive text for screen readers, here "Go to About page".

5fill in blank

hard

Fill both blanks to create a routes setup with home and profile paths.

React

<Routes>
  <Route path=[1] element={<Home />} />
  <Route path=[2] element={<Profile />} />
  <Route path='*' element={<NotFound />} />
</Routes>

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

A"/"

B"/profile"

C"/user"

D"/home"

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up profile path with '/user'.

Using '/home' instead of '/' for the home route.

The home page path is "/", the profile page is "/profile". The wildcard '*' catches all other paths. The option "user" is a distractor here and not used in correct answers.