Client-side routing concept in React - Mini Project: Build & Apply

Client-side Routing Concept in React

📖 Scenario: You are building a simple React app that shows different pages without reloading the browser. This is like switching TV channels instantly without waiting.

🎯 Goal: Create a React app with client-side routing using React Router. You will set up routes for Home and About pages and navigate between them.

📋 What You'll Learn

Use React functional components

Use React Router v6+ for routing

Create two pages: Home and About

Set up routes for '/' and '/about'

Add navigation links to switch pages without reload

💡 Why This Matters

🌍 Real World

Client-side routing is used in modern web apps to switch views instantly without waiting for the server to reload pages.

💼 Career

Understanding client-side routing is essential for frontend developers building single-page applications with React.

1

Set up basic React Router structure

Import BrowserRouter and Routes from react-router-dom. Create a functional component called App that returns <BrowserRouter><Routes></Routes></BrowserRouter>.

React

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

function App() {
  return (
    
      
        {/* Your routes will go here */}
      
    
  )
}

export default App

Hint

Remember to import BrowserRouter and Routes from react-router-dom and wrap your routes inside them.

2

Create Home and About components

Create two functional components called Home and About. Each should return a simple <h1> with text 'Home Page' and 'About Page' respectively.

React

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

function Home() {
  // Your code here
}

function About() {
  // Your code here
}

function App() {
  return (
    
      
      
    
  )
}

export default App

Hint

Each component should return an <h1> with the page name.

3

Add routes for Home and About pages

Import Route from react-router-dom. Inside <Routes>, add two <Route> elements: one with path='/' and element=<Home />, and another with path='/about' and element=<About />.

React

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

function Home() {
  return Home Page
}

function About() {
  return About Page
}

function App() {
  return (
    
      
        {/* Add Route for Home and About here */}
      
    
  )
}

export default App

Hint

Use <Route> inside <Routes> to define paths and components.

4

Add navigation links to switch pages

Import Link from react-router-dom. Inside App, above <Routes>, add a <nav> with two <Link> elements: one with to='/' and text 'Home', and another with to='/about' and text 'About'.

React

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

function Home() {
  return Home Page
}

function About() {
  return About Page
}

function App() {
  return (
    
      
        {/* Add Link components here */}
      
      
        } />
        } />
      
    
  )
}

export default App

Hint

Use <Link> to create clickable links that change the URL without reloading the page.

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