Manage Browser History State for Client-Side Routing

    // Example function to change page content and URL
    function navigateTo(path, state = {}) {
        // Update browser URL and history state
        history.pushState(state, '', path);

        // Here, you would load/render new content based on 'path'
        const mainContent = document.getElementById('mainContent');
        if (mainContent) {
            mainContent.innerHTML = `<h1>Content for ${path}</h1><p>Dynamic content loaded.</p>`;
        }
        console.log(`Navigated to: ${path}`);
    }

    // Example usage:
    // navigateTo('/about', { pageTitle: 'About Us' });
    // navigateTo('/products/123', { productId: 123 });

    // Handle browser's back/forward buttons
    window.addEventListener('popstate', (event) => {
        const path = location.pathname;
        const state = event.state; // The state object pushed by pushState
        console.log(`Browser history changed to: ${path}`, state);
        // Re-render content based on the new path and state
        const mainContent = document.getElementById('mainContent');
        if (mainContent) {
            mainContent.innerHTML = `<h1>Content for ${path}</h1><p>Dynamic content reloaded from history.</p>`;
        }
    });

    // Initial navigation (e.g., when page loads)
    document.addEventListener('DOMContentLoaded', () => {
        navigateTo(location.pathname, history.state);
    });