History API — Client-Side Routing Without Page Reloads

// Syntax: history.pushState(state, title, url)
// state: any serializable data associated with the entry
// title: ignored by most browsers (pass empty string)
// url: new URL (must be same origin)

// Simple navigation
history.pushState({ page: 'home' }, '', '/home');

// With data
history.pushState({
    userId: 123,
    section: 'profile',
    scrollPosition: window.scrollY
}, '', '/users/123/profile');

// Multiple history entries
history.pushState({ page: 'home' }, '', '/');
history.pushState({ page: 'about' }, '', '/about');
history.pushState({ page: 'contact' }, '', '/contact');
// History stack: [/] → [/about] → [/contact]

// Use replaceState when you want to update URL without creating
// a new history entry

// Example: update search params as user types
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', (event) => {
    const query = event.target.value;
    // Update URL without adding new history entry
    history.replaceState({ query }, '', `/?search=${query}`);
});

// Example: track page section without new entries
window.addEventListener('scroll', () => {
    const sections = ['intro', 'features', 'pricing'];
    const currentSection = sections.find(section => {
        const el = document.getElementById(section);
        if (el) {
            const rect = el.getBoundingClientRect();
            return rect.top <= 100 && rect.bottom >= 100;
        }
        return false;
    });

    if (currentSection) {
        history.replaceState(
            { section: currentSection },
            '',
            `/#${currentSection}`
        );
    }
});

// Listen for back/forward navigation
window.addEventListener('popstate', (event) => {
    // event.state contains the state object from pushState/replaceState
    console.log('Navigation state:', event.state);

    if (event.state) {
        // Use the stored state
        const { page, userId } = event.state;
        console.log(`Navigating to ${page} for user ${userId}`);
        renderPage(page, userId);
    } else {
        // No state (initial page load or hash navigation)
        const path = window.location.pathname;
        console.log('Navigating to path:', path);
        renderPageForPath(path);
    }
});

// Navigate function using pushState
function navigate(path, data = {}) {
    const fullPath = path.startsWith('/') ? path : `/${path}`;

    // Don't navigate to same page
    if (fullPath === window.location.pathname) return;

    // Add to history
    history.pushState(data, '', fullPath);

    // Render new page
    renderPage(fullPath, data);
}

// Initialize from current URL on page load
document.addEventListener('DOMContentLoaded', () => {
    const path = window.location.pathname;
    renderPageForPath(path);
});

class HistoryRouter {
    constructor(routes) {
        this.routes = routes;
        this.currentRoute = null;

        // Intercept link clicks
        document.addEventListener('click', this.handleLinkClick.bind(this));

        // Listen for back/forward
        window.addEventListener('popstate', this.handlePopState.bind(this));

        // Initialize
        this.resolveRoute(window.location.pathname);
    }

    handleLinkClick(event) {
        const link = event.target.closest('a');
        if (!link) return;

        const url = new URL(link.href);

        // Only intercept same-origin links
        if (url.origin !== window.location.origin) return;

        // Don't intercept links with download or external targets
        if (link.target === '_blank' || link.hasAttribute('download')) return;

        event.preventDefault();
        this.navigate(url.pathname + url.search);
    }

    navigate(path) {
        history.pushState({ path }, '', path);
        this.resolveRoute(path);
    }

    handlePopState(event) {
        const path = event.state?.path || window.location.pathname;
        this.resolveRoute(path);
    }

    resolveRoute(path) {
        // Find matching route
        const route = this.routes.find(r => {
            if (typeof r.pattern === 'string') {
                return r.pattern === path;
            }
            if (r.pattern instanceof RegExp) {
                return r.pattern.test(path);
            }
            return false;
        });

        if (route) {
            console.log('Route matched:', route.name);
            route.handler(this.getParams(path, route.pattern));
        } else {
            this.render404(path);
        }
    }

    getParams(path, pattern) {
        if (pattern instanceof RegExp) {
            const matches = path.match(pattern);
            return matches ? matches.slice(1) : [];
        }
        return [];
    }

    render404(path) {
        document.getElementById('app').innerHTML = `
            <h1>Page Not Found</h1>
            <p>No route matches "${path}"</p>
        `;
    }
}

// Usage
const router = new HistoryRouter([
    { name: 'home', pattern: '/', handler: () => renderHome() },
    { name: 'users', pattern: '/users', handler: () => renderUserList() },
    { name: 'user', pattern: /^\/users\/(\d+)$/, handler: (id) => renderUser(id) },
    { name: 'settings', pattern: '/settings', handler: () => renderSettings() }
]);

// Express.js example — serve index.html for all SPA routes
const express = require('express');
const app = express();

app.use(express.static('public'));

// All routes fall through to the SPA
app.get('*', (req, res) => {
    res.sendFile(__dirname + '/public/index.html');
});

// Nginx configuration
// location / {
//     try_files $uri $uri/ /index.html;
// }