React Router overview - 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 v6:

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to='/home'>Home</Link>
        <Link to='/about'>About</Link>
      </nav>
      <Routes>
        <Route path='/home' element=<h1>Home Page</h1> />
        <Route path='/about' element=<h1>About Page</h1> />
      </Routes>
    </BrowserRouter>
  );
}

If the user navigates to /about, what will be displayed?

React

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to='/home'>Home</Link>
        <Link to='/about'>About</Link>
      </nav>
      <Routes>
        <Route path='/home' element={<h1>Home Page</h1>} />
        <Route path='/about' element={<h1>About Page</h1>} />
      </Routes>
    </BrowserRouter>
  );
}

A The page shows two links 'Home' and 'About' but no heading is displayed.

B The page shows two links 'Home' and 'About' and below them the heading 'About Page'.

C Only the heading 'About Page' is shown, no links are visible.

D The page shows two links 'Home' and 'About' and below them the heading 'Home Page'.

💡 Hint

Remember that the Routes component renders the matching Route element based on the URL path.

The BrowserRouter wraps the app and enables routing. The nav always shows the two links. When the URL is /about, the Route with path /about matches and renders its element, which is the heading 'About Page'.

📝 Syntax

intermediate

Which option correctly defines a nested route in React Router v6?

In React Router v6, how do you correctly nest a child route inside a parent route?

A

<Route path='/dashboard' element={<Dashboard />}>
  <Route path='stats' component={Stats} />
</Route>

B

<Route path='/dashboard' element={<Dashboard />}>
  <Route path='/stats' element={<Stats />} />
</Route>

C

<Route path='/dashboard' element={<Dashboard />}>
  <Route path='stats' element={<Stats />} />
</Route>

D

<Route path='/dashboard' element={<Dashboard />} />
<Route path='/dashboard/stats' element={<Stats />} />

💡 Hint

Nested routes use relative paths without a leading slash and the element prop, not component.

Option C correctly nests the 'stats' route inside 'dashboard' using a relative path and the element prop. Option C defines separate routes but not nested. Option C uses an absolute path for the child which breaks nesting. Option C uses the deprecated component prop.

❓ state_output

advanced

What is the value of the URL after clicking the Link?

Given this React Router snippet:

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

function App() {
  return (
    <BrowserRouter>
      <Link to='/profile?tab=info'>Profile Info</Link>
      <Routes>
        <Route path='/profile' element=<Profile /> />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return <h2>User Profile</h2>;
}

What will the browser URL be after clicking the 'Profile Info' link?

React

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

function App() {
  return (
    <BrowserRouter>
      <Link to='/profile?tab=info'>Profile Info</Link>
      <Routes>
        <Route path='/profile' element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  return <h2>User Profile</h2>;
}

A http://localhost/profile

B http://localhost/profile/tab=info

C http://localhost/profile#tab=info

D http://localhost/profile?tab=info

💡 Hint

Query parameters start with a question mark ? in URLs.

The to prop in the Link includes the query string ?tab=info. Clicking the link updates the URL to include this query string after the path.

🔧 Debug

advanced

Why does this React Router code cause a blank page?

Look at this React Router v6 code snippet:

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

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

function Home() {
  return <h1>Welcome Home</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

When the app loads at the root URL /, the page is blank. What is the most likely cause?

React

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

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

function Home() {
  return <h1>Welcome Home</h1>;
}

function About() {
  return <h1>About Us</h1>;
}

A The <Route> path '/' matches only exactly '/', but React Router v6 matches partially by default, so the blank page is caused by missing a default route.

B The <Routes> component requires a single child, but there are two <Route> elements.

C The <Route> path '/' matches only exactly '/', but React Router v6 requires 'exact' prop to match root.

D The <Route> for '/' does not have an 'index' attribute, so it does not render by default.

💡 Hint

React Router v6 matches routes partially by default. Check if the root route is rendered correctly.

React Router v6 matches routes partially, so the path '/' matches all routes starting with '/'. The blank page is likely caused by missing a default route or a layout component. However, in this simple example, the code should render the Home component at '/'. The blank page might be caused by missing a React.StrictMode wrapper or a rendering issue outside routing.

🧠 Conceptual

expert

Which statement best describes React Router's 'useNavigate' hook behavior?

In React Router v6, what happens when you call const navigate = useNavigate(); and then navigate('/dashboard', { replace: true }); inside a component?

A It changes the URL to '/dashboard' and replaces the current entry in the browser history, so the back button skips the previous page.

B It changes the URL to '/dashboard' and adds a new entry to the browser history, so the back button returns to the previous page.

C It reloads the entire page at '/dashboard' ignoring React Router's client-side routing.

D It queues the navigation but does not change the URL until the component unmounts.

💡 Hint

The replace option controls whether navigation replaces or pushes history entries.

Calling navigate('/dashboard', { replace: true }) changes the URL and replaces the current history entry. This means the previous page is removed from history, so pressing back skips it. Without replace: true, navigation pushes a new entry.