Client-Side Routing

How Single Page Applications (SPAs) change pages without ever reloading the browser, creating a fast, native-app experience.

React5 min readConcept 36 of 46

The Multi-Page App (MPA)

Historically, the web worked via Server-Side Routing. When you clicked a link to /about, your browser discarded the current page, sent a request to the server, and waited.

The server built a brand new HTML document and sent it back. The browser then parsed this new document, re-downloaded the CSS and JS, and painted the new page from scratch. This caused the 'white flash' of a full page reload.

The Single Page App (SPA)

React applications are typically Single Page Applications. The server only ever sends *one* HTML document (index.html) containing an empty <div id="root">.

When a user clicks a link to /about in an SPA, React intercepts the click. It prevents the browser from sending a request to the server. Instead, it uses the browser's History API to instantly change the URL in the address bar.

React then looks at this new URL, unmounts the <Home /> component, and mounts the <About /> component. The page never reloads.

The Mechanics

Under the hood, client-side routing relies on two browser features:

1. window.history.pushState(): Changes the URL in the address bar without triggering a page reload.

2. The popstate event: An event listener that fires when the user clicks the browser's Back or Forward buttons.

React routing libraries wrap these APIs in a declarative <Router> component that listens for URL changes and renders the matching <Route>.

The White Flash

Compare the navigation experience between an MPA (Server Routing) and an SPA (Client Routing). Watch what happens to the global audio player when you navigate between pages!

Interactive Diagram: The White Flash

Server-Side Routing (MPA) vs Client-Side Routing (SPA)

https://myapp.com/

My App

Lo-Fi BeatsPaused

Welcome Home

This is the main dashboard of the application.

Notice: Audio Player will reset on navigation!
Server Network
Database
file
Internet

MPA downloads a full HTML document. Browser completely destroys old page, creating a white flash and losing JS state.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1What happens when you click a standard `<a>` tag with an `href` in a traditional Multi-Page Application (MPA)?
  2. 2How does Client-Side Routing change the URL without reloading the page?
  3. 3Which of the following is a major benefit of Client-Side Routing over Server-Side Routing?

Remember this

  • Traditional MPAs cause a 'white flash' full-page reload on every navigation.
  • React SPAs intercept clicks, prevent the default reload, and swap components dynamically.
  • The HTML5 History API (pushState and popstate) makes this possible.
  • Client-side routing feels instantaneous and preserves global state.
  • Pure SPAs suffer in SEO, leading to the rise of SSR frameworks like Next.js.

Done with this concept?

Mark it complete to track your progress. No login needed.