Client-side routing concept in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you click a in React Router?

Consider a React app using React Router. When you click a component, what is the main behavior that happens?

React

<Link to="/about">About</Link>

A React Router intercepts the click and updates the URL without reloading the page, rendering the new component.

B The browser reloads the entire page and navigates to /about.

C The app throws an error because <Link> is not a valid HTML tag.

D The URL changes but the page content does not update.

💡 Hint

Think about how single-page apps avoid full page reloads.

React Router's prevents the browser's default full page reload. Instead, it changes the URL and renders the new component inside the app, making navigation fast and smooth.

📝 Syntax

intermediate

Identify the correct way to define a route in React Router v6

Which of the following is the correct syntax to define a route that renders at path '/'?

A <Route path="/" element={<HomePage />} />

B <Route path="/" children={<HomePage />} />

C <Route path="/" render={() => <HomePage />} />

D <Route path="/" component={HomePage} />

💡 Hint

React Router v6 uses a new prop to specify what to render.

In React Router v6, the element prop is used to specify the component to render. The other props were used in older versions.

❓ state_output

advanced

What is the URL and rendered output after navigating programmatically?

Given this React Router code snippet, what will be the URL and rendered output after the button is clicked?

React

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

function App() {
  const navigate = useNavigate();
  return (
    <>
      <button onClick={() => navigate('/dashboard')}>Go Dashboard</button>
      <Routes>
        <Route path="/" element={<h1>Home</h1>} />
        <Route path="/dashboard" element={<h1>Dashboard</h1>} />
      </Routes>
    </>
  );
}

A Clicking the button causes a full page reload to '/dashboard'.

B URL stays '/' but the page shows 'Dashboard'.

C URL changes to '/dashboard' and the page shows 'Dashboard'.

D URL changes to '/dashboard' but the page still shows 'Home'.

💡 Hint

useNavigate changes the URL and triggers route rendering.

The navigate('/dashboard') call changes the URL to '/dashboard' and React Router renders the matching route's element, which is <h1>Dashboard</h1>.

🔧 Debug

advanced

Why does the route not render the component on URL change?

A developer wrote this React Router setup but the component does not render when the URL changes. What is the likely cause?

React

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

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

A The About component is not imported, causing a silent failure.

B The path '/about' is invalid and must be '/about/'.

C BrowserRouter must be replaced with HashRouter for routing to work.

D Routes component is missing around Route, so routing does not work.

💡 Hint

Check the required parent components for Route in React Router v6.

In React Router v6, Route components must be wrapped inside a Routes component. Without Routes, the route will not render.

🧠 Conceptual

expert

Why use client-side routing instead of server-side routing in React apps?

Which of the following best explains the main advantage of client-side routing in React apps?

A Client-side routing requires no JavaScript, so it works even if scripts are disabled.

B Client-side routing allows the app to update the URL and content without full page reloads, making navigation faster and smoother.

C Client-side routing automatically improves SEO by sending all routes to search engines.

D Client-side routing forces the browser to reload the entire page on every navigation.

💡 Hint

Think about user experience and speed when clicking links in single-page apps.

Client-side routing updates the URL and page content without reloading the whole page, which makes the app feel faster and more responsive.

Practice

1. What is the main purpose of client-side routing in a React application?

easy

A. To handle server-side rendering only

B. To reload the whole page when navigating

C. To change views without reloading the entire page

D. To manage database connections

Solution

1. Step 1: Understand client-side routing

   Client-side routing allows changing the visible content without refreshing the whole page, making navigation faster and smoother.

2. Step 2: Compare options

   Options B, C, and D describe behaviors unrelated to client-side routing in React.

3. Final Answer:

   To change views without reloading the entire page -> Option C

4. Quick Check:

   Client-side routing = change views without reload [OK]

Hint: Client-side routing avoids full page reloads [OK]

Common Mistakes:

• Confusing client-side routing with server-side rendering
• Thinking navigation always reloads the page
• Assuming routing manages backend tasks

2. Which of the following is the correct way to import components for client-side routing in React?

easy

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

B. import { Router, RouteList, Route } from 'react-router';

C. import { BrowserRouter, Route, Link } from 'react-router';

D. import { Router, Routes, Link } from 'react-router-dom';

Solution

1. Step 1: Identify the correct package and components

   The official React routing library is 'react-router-dom' and the main components are BrowserRouter, Routes, and Route.

2. Step 2: Check each import statement

   Only import { BrowserRouter, Routes, Route } from 'react-router-dom'; correctly imports BrowserRouter, Routes, and Route from 'react-router-dom'. Others use incorrect component names or wrong packages.

3. Final Answer:

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

4. Quick Check:

   Correct import = import { BrowserRouter, Routes, Route } from 'react-router-dom'; [OK]

Hint: Remember 'react-router-dom' exports BrowserRouter, Routes, Route [OK]

Common Mistakes:

• Using 'react-router' instead of 'react-router-dom'
• Mixing component names like Router instead of BrowserRouter
• Forgetting to import Routes component

3. Given this React routing code snippet, what will be displayed when the URL path is /about?

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

function App() {
  return (
    
      
        Home} />
        About Us} />
        Contact} />
      
    
  );
}

medium

A. Home

B. About Us

C. Contact

D. Nothing will be displayed

Solution

1. Step 1: Match URL path to Route path

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

2. Step 2: Identify the element rendered

   The Route for '/about' renders <h1>About Us</h1>.

3. Final Answer:

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

4. Quick Check:

   Path '/about' renders About Us [OK]

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

Common Mistakes:

• Choosing the home route for all paths
• Confusing element props with children
• Assuming multiple routes render simultaneously

4. Identify the error in this React routing setup:

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

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

medium

A. Route components must be inside Routes component

B. BrowserRouter cannot wrap Routes

C. Route elements cannot use JSX components

D. Missing import for Home and About components

Solution

1. Step 1: Check Route placement

   All Route components must be children of a Routes component to work correctly.

2. Step 2: Identify the misplaced Route

   The Route with path='/' is outside the Routes component, which is incorrect.

3. Final Answer:

   Route components must be inside Routes component -> Option A

4. Quick Check:

   Routes wrap Route components [OK]

Hint: Always nest Route inside Routes [OK]

Common Mistakes:

• Placing Route outside Routes component
• Thinking BrowserRouter cannot wrap Routes
• Confusing JSX elements with strings in element prop

5. You want to create a navigation menu that updates the URL and shows the correct page without reloading. Which React Router component should you use for the links?

hard

A. <a> tags with href attribute

B. <button> with onClick calling window.location

C. <NavLink> component but without BrowserRouter

D. <Link> component from react-router-dom

Solution

1. Step 1: Understand navigation in React Router

   The <Link> component updates the URL and renders the new route without reloading the page.

2. Step 2: Evaluate options for SPA navigation

   <a> tags with href attribute causes full page reloads. <button> with onClick calling window.location uses window.location which reloads. <NavLink> component but without BrowserRouter requires BrowserRouter to work properly.

3. Final Answer:

   <Link> component from react-router-dom -> Option D

4. Quick Check:

   Use Link for client-side navigation [OK]

Hint: Use Link, not anchor tags, for SPA navigation [OK]

Common Mistakes:

• Using <a> tags causing full page reload
• Forgetting BrowserRouter wrapper for NavLink
• Using buttons with window.location causing reload