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.