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.