Client-side routing concept in React

Introduction

Client-side routing lets your React app change pages without reloading the whole website. It makes the app feel faster and smoother.

When building a single-page app that shows different views or pages.

When you want users to navigate without waiting for full page reloads.

When you want to keep the app state while switching pages.

When you want to update the browser address bar to match the current view.

When you want to handle navigation inside your React app easily.

Syntax

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>
  );
}

BrowserRouter wraps your app to enable routing.

Routes contains all your route definitions.

Route defines a path and which component to show.

Examples

Basic routing with two pages: Home and Contact.

React

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Route with a dynamic parameter :userId to show different profiles.

React

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile/:userId" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

Redirect from an old path to a new path using Navigate.

React

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/old-path" element={<Navigate to="/new-path" replace />} />
        <Route path="/new-path" element={<NewPage />} />
      </Routes>
    </BrowserRouter>
  );
}

Sample Program

This React app uses client-side routing to switch between Home and About pages without reloading. The navigation links update the URL and show the correct page content instantly.

React

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

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav aria-label="Main navigation">
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Important Notes

Client-side routing keeps the app fast by avoiding full page reloads.

Use semantic HTML and ARIA labels for accessible navigation.

Remember to install react-router-dom to use routing features.

Summary

Client-side routing changes views without reloading the page.

Use BrowserRouter, Routes, and Route to set up routes.

Navigation links update the URL and show the right content instantly.