What is Client-Side Routing and How React Router Works

A traditional website navigates between pages by making a full HTTP request to the server for each URL — the server responds with a new HTML document, the browser tears down the current page, and renders the new one. A Single-Page Application (SPA) like the MERN Blog works differently: the browser loads one HTML file once, and all subsequent navigation is handled entirely in JavaScript — no full page reloads, no round-trips to the server for HTML. React Router is the library that makes this possible. It intercepts browser navigation events, matches the current URL against your route definitions, and renders the corresponding React component — giving users the feel of a multi-page site while keeping the speed and interactivity of an SPA.

Traditional vs Client-Side Navigation #

How React Router Works Under the Hood #

Browser address bar: https://mernblog.com/posts/getting-started-with-mern

1. User clicks a <Link to="/posts/getting-started-with-mern"> component
2. React Router calls window.history.pushState() — updates URL without reload
3. React Router reads the new URL and matches it against your route definitions
4. React Router renders the component for the matched route (PostDetailPage)
5. PostDetailPage uses useParams() to get the slug from the URL
6. PostDetailPage fetches the post from the Express API using the slug
7. Post data arrives and React renders the full post — all without a page reload

Back button:
1. Browser fires the popstate event
2. React Router listens for popstate and reads the new (previous) URL
3. React Router re-renders the component for the previous URL

React Router v6 — Key Components and Hooks #

The MERN Blog Route Map #

Public routes:
  /                    → HomePage         (list of published posts)
  /posts/:id           → PostDetailPage   (single post)
  /login               → LoginPage        (login form)
  /register            → RegisterPage     (register form)

Protected routes (auth required):
  /dashboard           → DashboardPage    (user's posts)
  /posts/new           → CreatePostPage   (new post form)
  /posts/:id/edit      → EditPostPage     (edit post form)

Utility routes:
  *                    → NotFoundPage     (404 — no route matched)

Common Mistakes #

Mistake 1 — Using <a href> instead of <Link> #

❌ Wrong — native anchor causes a full page reload:

<a href="/posts/123">Read More</a>
// Browser sends a GET request to the server — page reloads, all state is lost

✅ Correct — use Link for in-app navigation:

import { Link } from 'react-router-dom';
<Link to="/posts/123">Read More</Link> // ✓ client-side — no reload

Mistake 2 — Forgetting to configure the server for SPA fallback #

❌ Wrong — user bookmarks /posts/123 and gets a 404 from the hosting server.

✅ Correct — configure the server or hosting platform to serve index.html for all paths. On Netlify: create public/_redirects with content /* /index.html 200. On Render: set the rewrite rule to serve index.html for all paths.

Mistake 3 — Mixing React Router v5 and v6 APIs #

❌ Wrong — using v5 components in a v6 project:

import { Switch, Redirect } from 'react-router-dom'; // v5 — does not exist in v6
<Switch><Route exact path="/" component={Home} /></Switch>

✅ Correct — v6 API:

import { Routes, Route, Navigate } from 'react-router-dom'; // v6 ✓
<Routes><Route path="/" element={<Home />} /></Routes>

Quick Reference #