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.

Practice

1. What is the main purpose of React Router in a React application?

easy

A. To style React components with CSS

B. To create multiple pages without reloading the browser

C. To manage state across components

D. To fetch data from APIs

Solution

1. Step 1: Understand React Router's role

   React Router helps build apps with multiple pages by changing views without full page reloads.

2. Step 2: Compare with other options

   Styling, state management, and data fetching are handled by other tools, not React Router.

3. Final Answer:

   To create multiple pages without reloading the browser -> Option B

4. Quick Check:

   React Router = multi-page navigation without reload [OK]

Hint: React Router = multi-page navigation without full reload [OK]

Common Mistakes:

• Confusing React Router with CSS or styling tools
• Thinking React Router manages data fetching
• Assuming React Router handles state management

2. Which of the following is the correct way to wrap your app with React Router for browser-based routing?

easy

A. <BrowserRouter>...</BrowserRouter>

B. <Link>...</Link>

C. <Route>...</Route>

D. <Router>...</Router>

Solution

1. Step 1: Identify the main router component

   For browser history routing, React Router uses BrowserRouter to wrap the app.

2. Step 2: Understand other components

   Route defines pages, Link creates navigation links, and Router alone is not a valid component.

3. Final Answer:

   <BrowserRouter>...</BrowserRouter> -> Option A

4. Quick Check:

   BrowserRouter wraps app for browser routing [OK]

Hint: Wrap app with <BrowserRouter> for browser routing [OK]

Common Mistakes:

• Using <Router> instead of <BrowserRouter>
• Confusing <Route> with the router wrapper
• Wrapping app with <Link> which is for navigation

3. Given this React Router setup, 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 /> />
      </Routes>
    </BrowserRouter>
  );
}

medium

A. The component

B. Nothing renders because of missing default route

C. Both and components

D. The component

Solution

1. Step 1: Match URL path with Route path

   The URL /about matches the route with path='/about', so <About /> renders.

2. Step 2: Understand route exclusivity

   Only the matching route's element renders; <Home /> renders only at /.

3. Final Answer:

   The <About /> component -> Option D

4. Quick Check:

   URL '/about' renders About component [OK]

Hint: URL path matches Route path exactly to render component [OK]

Common Mistakes:

• Thinking both components render simultaneously
• Assuming missing default route breaks rendering
• Confusing '/' path with '/about'

4. Identify the error in this React Router code snippet:

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

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

medium

A. <Route> must be inside <Routes>

B. Missing closing tag for <BrowserRouter>

C. The <Route> for '/' should not have an element prop

D. Cannot use <Route> and <Routes> together

Solution

1. Step 1: Check component nesting rules

   In React Router, all <Route> components must be children of <Routes>.

2. Step 2: Identify incorrect placement

   The <Route path='/' ... /> is outside <Routes>, which is invalid.

3. Final Answer:

   <Route> must be inside <Routes> -> Option A

4. Quick Check:

   Routes wrap Route components [OK]

Hint: Always put <Route> inside <Routes> component [OK]

Common Mistakes:

• Placing <Route> outside <Routes>
• Thinking <Route> can be used alone
• Confusing element prop usage

5. You want to create a navigation menu that changes the URL without reloading the page. Which React Router component should you use, and why? Choose the best option.

hard

A. Use <Route> because it defines the navigation links

B. Use <a> tags because they are standard HTML links

C. Use <Link> because it updates the URL and renders the new page without reload

D. Use <BrowserRouter> because it creates the navigation menu

Solution

1. Step 1: Identify component for navigation links

   <Link> is designed to change the URL and render new pages without reloading.

2. Step 2: Compare with other options

   <a> causes full page reload, <Route> defines pages, and <BrowserRouter> wraps the app but does not create links.

3. Final Answer:

   Use <Link> because it updates the URL and renders the new page without reload -> Option C

4. Quick Check:

   Use Link for smooth navigation without reload [OK]

Hint: Use <Link> for navigation to avoid full page reload [OK]

Common Mistakes:

• Using <a> tags causing full reload
• Confusing <Route> with navigation links
• Thinking <BrowserRouter> creates menus