Defining routes in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

React

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

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

ABrowserRouter

BuseState

CReactDOM

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Importing hooks like useState instead of routing components.

Forgetting to import BrowserRouter causes routing to fail.

The BrowserRouter component is used to define routing in React applications.

2fill in blank

medium

Complete the code to define a route path for the Home component.

React

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

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

A"/home"

B"index"

C"home"

D"/"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the path string.

Using incorrect path strings like 'home' without slash.

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

3fill in blank

hard

Fix the error in the route definition by completing the missing prop name.

React

<Route [1]="/about" element={<About />} />

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

Acomponent

Bhref

Cpath

Dto

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'component' prop which is deprecated in React Router v6.

Confusing route props with link props.

The path prop defines the URL path for the route.

4fill in blank

hard

Fill both blanks to create a route that renders the Dashboard component at '/dashboard'.

React

<Route [1]=[2] element={<Dashboard />} />

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

Apath

B"/dashboard"

Cto

D"dashboard"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'to' instead of 'path' in routes.

Omitting the leading slash in the path string.

The path prop sets the URL, and it must be a string like "/dashboard".

5fill in blank

hard

Fill all three blanks to create a Router setup with BrowserRouter, Routes, and a Route for the Profile component at '/profile'.

React

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

function App() {
  return (
    <[2]>
      <Routes>
        <Route path=[3] element={<Profile />} />
      </Routes>
    </[2]>
  );
}

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

ABrowserRouter

BHashRouter

C"/profile"

D"profile"

Attempts:

3 left

💡 Hint

Common Mistakes

Using HashRouter instead of BrowserRouter without reason.

Forgetting to wrap Routes inside BrowserRouter.

Omitting quotes around the path string.

Use BrowserRouter to wrap routes, and set the path prop to "/profile" for the Profile route.