How To Change The URL Without Reloading The Page?

Using pushState() Method

The pushState() method in the History API changes the URL without reloading the page. This method adds a new entry to the browser's history stack.

The pushState() function takes three parameters:

1. A state object: This can contain data you want to associate with the new history entry.
2. A title: Most browsers ignore this parameter.
3. A URL: The new URL to display in the address bar.

Here's an example of how to use pushState():

let stateObj = { page: "newPage" };
history.pushState(stateObj, "", "/new-url");

try {
    history.pushState(stateObj, "", "/new-url");
} catch (e) {
    console.error("Invalid URL: ", e);
}

Modifying Browser History

When you use pushState(), it adds a new entry to the browser's history stack without reloading the page. This allows users to use the browser's back and forward buttons to navigate through these history entries.

To maintain proper back and forward navigation:

1. Listen for the popstate event, which fires when the user navigates through history.
2. Update your page content based on the state object associated with each history entry.

Here's an example:

window.addEventListener('popstate', function(event) {
    if (event.state) {
        updateContent(event.state.page);
    }
});

function updateContent(page) {
    // Update your page content based on the 'page' parameter
}

Detecting URL Changes

To detect URL changes, especially when users click the browser's back or forward buttons, you can use the popstate event listener. This event fires when the active history entry changes.

Here's how to set up a popstate event listener:

window.addEventListener('popstate', function(event) {
    if (event.state) {
        // Handle the state change
        console.log('URL changed to: ' + document.location.href);
        console.log('State data: ', event.state);
    }
});

This code listens for popstate events and logs the new URL and state data when they occur.

let lastUrl = location.href; 
new MutationObserver(() => {
  const url = location.href;
  if (url !== lastUrl) {
    lastUrl = url;
    onUrlChange(url);
  }
}).observe(document, {subtree: true, childList: true});

function onUrlChange(url) {
  console.log('URL changed to:', url);
  // Add your custom logic here
}

Updating Page Content

When the URL changes, you often need to update the page content to match the new state. This involves changing page elements to keep them consistent with the URL.

Here's an example of how to update page content:

function updateContent(newState) {
    // Update page title
    document.title = newState.title;

    // Update main content
    document.getElementById('main-content').innerHTML = newState.content;

    // Update navigation menu
    updateNavigation(newState.currentPage);
}

function updateNavigation(currentPage) {
    let navItems = document.querySelectorAll('nav a');
    navItems.forEach(item => {
        if (item.getAttribute('href') === currentPage) {
            item.classList.add('active');
        } else {
            item.classList.remove('active');
        }
    });
}

// Use this function when pushing a new state
function changeState(newUrl, newTitle, newContent) {
    let newState = {
        title: newTitle,
        content: newContent,
        currentPage: newUrl
    };
    history.pushState(newState, "", newUrl);
    updateContent(newState);
}

In this example:

1. The updateContent function changes the page title, main content, and updates the navigation menu.
2. The updateNavigation function highlights the current page in the navigation menu.
3. The changeState function combines pushing a new state and updating the content, keeping everything consistent.