Routing Fundamentals — Client-Side Navigation in SPAs

A traditional multi-page website sends a new HTML document from the server on every click. A Single Page Application (SPA) loads one HTML document and then updates the page content using JavaScript — the server is only asked for data (JSON from the API), never for new pages. React Router gives React SPAs the appearance of multiple pages by mapping URL paths to different components, using the browser’s History API to update the URL without triggering a full page load. The result: fast, app-like navigation with shareable, bookmarkable URLs.

How Client-Side Routing Works #

Traditional server-side routing:
  User clicks /posts/42
  → Browser sends GET /posts/42 to server
  → Server returns a new HTML page
  → Full page reload, all JS/CSS re-downloaded

Client-side routing (React Router):
  User clicks /posts/42
  → React Router intercepts the click (e.preventDefault())
  → URL bar updates to /posts/42 via History API (pushState)
  → React Router renders the <PostDetailPage> component
  → No server request, no page reload — instant navigation
  → Components fetch data from /api/posts/42 as needed

On direct URL access (/posts/42):
  → Server returns index.html (the SPA shell)
  → React loads, React Router reads the URL
  → Renders <PostDetailPage> directly
  (Requires server configuration: serve index.html for all routes)

Installation #

npm install react-router-dom

// src/main.jsx — wrap the app with BrowserRouter
import { StrictMode }    from "react";
import { createRoot }    from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App               from "./App.jsx";
import "./index.css";

createRoot(document.getElementById("root")).render(
    <StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </StrictMode>
);
// BrowserRouter provides the routing context that all Router hooks need
// It must wrap any component that uses useNavigate, useParams, Link, etc.

Router Types #

Common Mistakes #

Mistake 1 — Using <a> instead of <Link> for internal navigation #

❌ Wrong — full page reload, loses all React state:

<a href="/posts/42">Read Post</a>   // causes full page reload!

✅ Correct — React Router’s Link for internal navigation:

import { Link } from "react-router-dom";
<Link to="/posts/42">Read Post</Link>   // ✓ no page reload

Mistake 2 — Not wrapping the app with BrowserRouter #

❌ Wrong — hooks throw: “useNavigate may be used only in the context of a Router”:

createRoot(document.getElementById("root")).render(<App />);   // no BrowserRouter!

✅ Correct — wrap with BrowserRouter in main.jsx.

Quick Reference #