JS History

JavaScript History: Browser History Navigation & SPA Routing

The window.history object allows manipulation of the browser session history. Single Page Applications (SPAs) use the HTML5 History API (pushState, replaceState, popstate event) to perform client-side URL routing without triggering full page reloads.

SPA History Routing Flowchart

flowchart TD
    UserClick["User Clicks SPA Link"] --> PushState["history.pushState(state, '', '/new-url')"]
    PushState --> URLUpdate["Browser Address Bar Updates (No HTTP Reload!)"]
    URLUpdate --> RenderView["JavaScript renders new UI component view"]
    
    UserBack["User Clicks Browser Back Button"] --> PopStateEvent["popstate Event Fires"]
    PopStateEvent --> RestoreState["JavaScript reads event.state and restores view"]

History API Reference

Practical Code Example

// Demonstrating SPA Client-Side Router with History API

document.addEventListener("DOMContentLoaded", () => {
  // 1. Programmatic SPA Navigation
  function navigateSPARoute(path, pageTitle) {
    const stateData = { page: path };
    
    // Updates URL address bar and history stack WITHOUT page reload!
    history.pushState(stateData, pageTitle, path);
    document.title = pageTitle;
    
    // Render view for new path
    renderView(path);
  }

  function renderView(path) {
    console.log(`Rendering UI component for route: "${path}"`);
  }

  // 2. Listening for Browser Back / Forward Button Clicks
  window.addEventListener("popstate", (event) => {
    console.log("Popstate Event Fired! State object:", event.state);
    if (event.state && event.state.page) {
      renderView(event.state.page);
    } else {
      renderView(location.pathname);
    }
  });
});

Best Practices & Gotchas

• pushState Does Not Fire popstate: Calling history.pushState() or history.replaceState() updates the URL, but does NOT trigger the popstate event. popstate fires ONLY on user-initiated Back/Forward navigation.
• Server-Side Fallback Routing: When implementing SPA client-side routing, configure server infrastructure to fallback all unhandled GET requests to index.html.
• State Data Size Limit: State objects passed to pushState(stateData, ...) must be serializable and under browser size limits (typically 2MB).

Self-Check Challenge

Why is history.pushState() essential for modern Single Page Application (SPA) frameworks like React Router?