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

Need a 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

Need a 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

Need a 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

Need a hint?

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