DEV Community

Cover image for 🌐 Is React Really Single Page? Understanding Routing & Multiple Pages in SPAs
Yogesh Bamanier
Yogesh Bamanier

Posted on

🌐 Is React Really Single Page? Understanding Routing & Multiple Pages in SPAs

#react #opensource #javascript

React is often called a “Single Page Application” framework, but you might see multiple pages in your UI. How does that work? Let’s break it down. ✨

🔹 What “Single Page” Really Means 🧩

When people say React apps are Single Page Applications (SPA):

  • The app loads one HTML file from the server, usually index.html.
  • React dynamically renders components inside a root element, without fully reloading the page.
  • All navigation and content changes happen client-side, in JavaScript.

💡 The “single page” refers to one HTML shell, not that your app can’t have multiple views or sections.

🔹 Why React Needs Routing 🛣️

Even though SPAs are technically one HTML page, users expect different URLs for different views:

  • /home → Homepage
  • /profile → User profile
  • /settings → Settings page

Without routing:

  • Navigation would rely on showing/hiding components manually, which is messy for large apps.
  • Users cannot bookmark or share specific views, breaking usability.

React uses React Router (or other routing libraries) to:

  1. Listen for URL changes 🌐
  2. Render the corresponding component/view dynamically
  3. Update the browser history so back/forward buttons work ⬅️➡️

All this happens without reloading the HTML page, keeping the SPA behavior intact ⚡

🔹 How React Achieves “Multiple Pages” 🔧

React SPAs use browser APIs and routing libraries to manage views.

1. pushState & replaceState (History API) 🏗️

  • JavaScript can change the URL without reloading the page using window.history.pushState()
  • Example: 
window.history.pushState({page: 'profile'}, 'Profile', '/profile');
Enter fullscreen mode Exit fullscreen mode
  • The browser URL updates ✅, but the page doesn’t reload
  • React Router listens for this change and renders the Profile component dynamically

2. Pulling State on Refresh 🔄

  • When the user refreshes or navigates directly to /profile, the browser requests the URL from the server
  • The server usually responds with the same index.html, and React Router reads the URL to display the correct view
  • This is why SPAs need server fallback for all routes to index.html

3. Hash-based Routing (Optional)

  • Older SPAs or some lightweight routers use URL hashes like /home#profile
  • The part after # is never sent to the server
  • React can read window.location.hash to render the correct component

🔹 Flowchart: How SPA Routing Works 🌈 

User clicks link or types URL 🌐
          │
          ▼
     Browser updates URL via
     pushState / replaceState 🏗️
          │
          ▼
    React Router listens 👂
          │
          ▼
  Correct Component rendered 🖌️
          │
          ▼
Browser history updated ⬅️➡️
          │
          ▼
Smooth SPA experience ⚡
Enter fullscreen mode Exit fullscreen mode

⚡ Summary: React changes the browser state via pushState for smooth navigation and reads current URL on refresh to display the correct page.

🔹 Multiple Pages in UI, Single Page in Reality 📄

Think of it like a magic book:

  • One HTML page = one book
  • Each URL = a chapter inside the book
  • Routing = turning to the correct chapter without opening a new book

This explains why React apps feel like multi-page apps, but are technically single-page.

🔹 TL;DR

React SPAs are single HTML pages that dynamically render multiple views using routing libraries.
They achieve this by changing the URL without reloads (pushState) and reading the current URL on refresh to render the correct component.

Author: Yogesh Bamanier
LinkedIn: https://www.linkedin.com/in/yogesh-007/

Top comments (0)