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.

Practice

1. Which component is used to wrap your entire React app to enable routing?

easy

A. Link

B. Route

C. BrowserRouter

D. Routes

Solution

1. Step 1: Understand routing setup

   React Router requires a top-level component to manage routing context.

2. Step 2: Identify the wrapper component

   BrowserRouter wraps the app to enable routing features.

3. Final Answer:

   <BrowserRouter> -> Option C

4. Quick Check:

   Routing wrapper = BrowserRouter [OK]

Hint: Remember: BrowserRouter wraps the whole app for routing [OK]

Common Mistakes:

• Using <Routes> as the top wrapper
• Confusing <Link> with the router wrapper
• Using <Route> to wrap the app

2. Which of the following is the correct syntax to define a route for path '/home' rendering component?

easy

A. } />

B.

C. } />

D. } />

Solution

1. Step 1: Recall Route syntax in React Router v6+

   Routes use path for URL and element for component to render.

2. Step 2: Match correct syntax

   <Route path='/home' element={<Home />} /> uses path='/home' and element={<Home />}, which is correct.

3. Final Answer:

   <Route path='/home' element={<Home />} /> -> Option A

4. Quick Check:

   Route syntax = path + element [OK]

Hint: Use path for URL and element for component in Route [OK]

Common Mistakes:

• Using component instead of element
• Using to instead of path
• Passing component as JSX instead of element prop

3. Given this code snippet, what will be rendered when the URL path is '/about'?

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={
Home
} />
        <Route path='/about' element={
About Us
} />
        <Route path='/contact' element={
Contact
} />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. Home

B. Nothing renders

C. Contact

D. About Us

Solution

1. Step 1: Match URL path to Route path

   The URL '/about' matches the Route with path='/about'.

2. Step 2: Identify rendered element

   The matched Route renders <h1>About Us</h1>.

3. Final Answer:

   <h1>About Us</h1> -> Option D

4. Quick Check:

   URL '/about' renders About Us [OK]

Hint: Match URL path exactly to Route path to find output [OK]

Common Mistakes:

• Confusing '/' with '/about'
• Assuming default route renders for all paths
• Ignoring exact path matching

4. What is wrong with this route definition?

<Route path='/profile' component={} />

medium

A. The path should be '/profiles' instead of '/profile'

B. The prop 'component' should be 'element' with JSX

C. The component should be passed as a string, not JSX

D. Route cannot have a path prop

Solution

1. Step 1: Recall correct Route props in React Router v6+

   Routes use element prop to pass JSX, not component.

2. Step 2: Identify the error

   Using component causes the route not to render correctly.

3. Final Answer:

   The prop 'component' should be 'element' with JSX -> Option B

4. Quick Check:

   Use element, not component, for Route JSX [OK]

Hint: Use element prop with JSX in Route, not component [OK]

Common Mistakes:

• Using component prop from older React Router versions
• Passing component as string
• Omitting element or component prop

5. You want to create nested routes where '/dashboard' shows a component and '/dashboard/settings' shows inside it. Which is the correct way to define these routes?

hard

A.
}>
} />

B.
} />
} />

C.
}>
} />

D.
}>
} />

Solution

1. Step 1: Understand nested route path rules

   Nested routes use relative paths inside parent Route; child path 'settings' appends to '/dashboard'.

2. Step 2: Check each option for correct nesting

   <Routes> <Route path='/dashboard' element={<Dashboard />}> <Route path='settings' element={<Settings />} /> </Route> </Routes> correctly nests settings as child path without repeating parent path.

3. Final Answer:

   <Routes> <Route path='/dashboard' element={<Dashboard />}> <Route path='settings' element={<Settings />} /> </Route> </Routes> -> Option A

4. Quick Check:

   Nested child paths are relative, no leading slash [OK]

Hint: Nested routes use relative paths without leading slash [OK]

Common Mistakes:

• Using absolute paths in nested routes
• Defining nested routes as siblings
• Repeating parent path in child route