基于HTML5 History实现的返回按钮仅能生效一次的问题排查

Hey there! Let's figure out why your SPA back button only works once—this is a super common pitfall when rolling your own client-side routing with vanilla JS and HTML5. The core issue almost always boils down to how you're managing the browser's history stack or handling navigation events.

Common Causes of the Problem #

First, let's break down what's likely happening:

• When you navigate from 1 → 2 → 3, your code probably adds entries to the browser's history stack correctly. But when you click back from 3 to 2, you're either replacing the history entry instead of letting the browser handle it naturally, or you're not properly listening for the popstate event that triggers when the history stack changes.
• If you're manually updating the URL and using history.replaceState() instead of history.pushState() during navigation, you're overwriting history entries instead of adding new ones. That means after going back once, there's no older entry to navigate to.

Fixing the Issue: A Proper Vanilla JS Implementation #

Let's walk through a corrected approach that maintains a valid history stack and handles back/forward events correctly.

Step 1: Maintain Route State & Use pushState for Navigation

Every time you navigate to a new page in your SPA, use history.pushState() to add a new entry to the browser's history stack. This ensures the stack builds up correctly (1 → 2 → 3) instead of overwriting entries.

Step 2: Listen for popstate Events

The browser fires a popstate event whenever the user clicks the browser's back/forward buttons, or when you call history.back()/history.forward(). You need to listen for this event to update your SPA's content to match the new route.

Step 3: Keep the Back Button Simple

Your back button only needs to call history.back()—let the popstate event handle updating the page content.

Here's a working code example:

// Track the current route
let currentRoute = window.location.pathname;

// Helper function to render content based on route
function renderRoute(route) {
  const appContainer = document.getElementById('app');
  
  switch(route) {
    case '/page1':
      appContainer.innerHTML = `
        <h1>Page 1</h1>
        <button onclick="navigateTo('/page2')">Go to Page 2</button>
      `;
      break;
    case '/page2':
      appContainer.innerHTML = `
        <h1>Page 2</h1>
        <button onclick="navigateTo('/page3')">Go to Page 3</button>
        <button class="back-btn">Back</button>
      `;
      // Bind back button click
      appContainer.querySelector('.back-btn').addEventListener('click', () => history.back());
      break;
    case '/page3':
      appContainer.innerHTML = `
        <h1>Page 3</h1>
        <button class="back-btn">Back</button>
      `;
      appContainer.querySelector('.back-btn').addEventListener('click', () => history.back());
      break;
    default:
      // Fallback to page 1 if route doesn't exist
      navigateTo('/page1');
  }
}

// Navigation function to update route and history stack
function navigateTo(newRoute) {
  if (newRoute === currentRoute) return;
  
  currentRoute = newRoute;
  // Push new state to history stack
  history.pushState({ route: newRoute }, '', newRoute);
  // Render the new route
  renderRoute(newRoute);
}

// Listen for popstate events to handle back/forward
window.addEventListener('popstate', (event) => {
  if (event.state?.route) {
    currentRoute = event.state.route;
    renderRoute(currentRoute);
  }
});

// Initialize the app with the current route
renderRoute(currentRoute);

Key Checks for Your Existing Code #

Go through your current implementation to spot these common mistakes:

1. Are you using replaceState instead of pushState? replaceState overwrites the current history entry, which breaks the stack. Always use pushState when navigating to a new page.
2. Is your back button doing too much? If you're manually updating the URL and re-rendering without calling history.back(), you're not modifying the history stack correctly. Let history.back() handle the stack change, and rely on popstate to trigger re-rendering.
3. Did you forget to listen for popstate? Without this listener, your SPA won't update when the user uses the browser's back button or your custom back button calls history.back().

With these fixes, your back button should work consistently across all navigation steps!

内容的提问来源于stack exchange，提问作者ahron