Defining routes in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output of this React Router setup?

Consider this React component using React Router. What will be displayed when the URL path is /about?

React

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

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

A <h1>About Us</h1>

B <h1>Home</h1>

C <h1>Contact</h1>

D Nothing is rendered

💡 Hint

Look at the path that matches the URL /about.

The Route with path /about matches the URL, so its element <h1>About Us</h1> is rendered.

📝 Syntax

intermediate

Which option correctly defines a nested route in React Router?

You want to define a nested route where /dashboard/settings renders a Settings component inside Dashboard. Which code snippet is correct?

A

<Route path='/dashboard' element={<Dashboard />}>
  <Route path='settings' element={<Settings />} />
</Route>

B

<Route path='/dashboard' element={<Dashboard />} />
<Route path='/dashboard/settings' element={<Settings />} />

C

<Route path='/dashboard/settings' element={<Settings />}>
  <Route path='/dashboard' element={<Dashboard />} />
</Route>

D <Route path='/dashboard/settings' element={<Dashboard><Settings /></Dashboard>} />

💡 Hint

Nested routes are defined by placing child Route inside a parent Route.

Option A correctly nests the settings route inside the dashboard route using child Route elements.

🔧 Debug

advanced

Why does this route not render the expected component?

Given this code, navigating to /profile shows a blank page. What is the cause?

React

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/profile' element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

A The <code>Routes</code> component must be outside <code>BrowserRouter</code>.

B The <code>Profile</code> component is not imported.

C The <code>BrowserRouter</code> is missing a closing tag.

D The <code>Route</code> uses <code>component</code> prop instead of <code>element</code>.

💡 Hint

Check the prop name used to specify the component to render in Route.

React Router v6 uses element prop with JSX element, not component prop.

❓ state_output

advanced

What is the output when navigating between routes with state?

Consider this React Router code. What will be logged when navigating from /home to /details with state { fromHome: true }?

React

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

function Details() {
  const location = useLocation();
  console.log(location.state);
  return <h1>Details Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/home' element={<button onClick={() => window.history.pushState({ fromHome: true }, '', '/details')}>Go to Details</button>} />
        <Route path='/details' element={<Details />} />
      </Routes>
    </BrowserRouter>
  );
}

A { fromHome: true }

B Throws an error

C null

D undefined

💡 Hint

React Router's useLocation reads state passed via Link or navigate, not window.history.pushState.

Using window.history.pushState does not update React Router's location state, so location.state is null.

🧠 Conceptual

expert

Which statement about React Router route matching is true?

React Router v6 matches routes based on the URL path. Which of these statements is correct about how it matches routes?

A Routes are matched in order and the first match is rendered exclusively.

B Routes are matched by best match, considering path segments and wildcards, ignoring order.

C Routes are matched by longest path first, then by order of definition.

D Routes are matched only if the path exactly equals the URL.

💡 Hint

Think about how React Router v6 chooses which route to render when multiple routes could match.

React Router v6 uses a ranking system to find the best match based on path specificity, not order.

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