¿Cómo cambiar la URL sin recargar la página?

Uso del método pushState()

El método pushState() en la API de historial cambia la URL sin recargar la página. Este método agrega una nueva entrada a la pila de historial del navegador.

La función pushState() toma tres parámetros:

1. Un objeto de estado: Puede contener datos que quieras asociar con la nueva entrada del historial.
2. Un título: La mayoría de los navegadores ignoran este parámetro.
3. Una URL: La nueva URL que se mostrará en la barra de direcciones.

Aquí tienes un ejemplo de cómo usar pushState():

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

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

Modificación del historial del navegador

Cuando usas pushState(), se agrega una nueva entrada a la pila de historial del navegador sin recargar la página. Esto permite a los usuarios utilizar los botones de retroceso y avance del navegador para navegar a través de estas entradas del historial.

Para mantener una navegación adecuada hacia atrás y hacia adelante:

1. Escucha el evento popstate, que se activa cuando el usuario navega a través del historial.
2. Actualiza el contenido de tu página basándote en el objeto de estado asociado con cada entrada del historial.

Aquí tienes un ejemplo:

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

function updateContent(page) {
    // Actualiza el contenido de tu página basándote en el parámetro 'page'
}

Detección de cambios de URL

Para detectar cambios en la URL, especialmente cuando los usuarios hacen clic en los botones de retroceso o avance del navegador, puedes usar el detector de eventos popstate. Este evento se activa cuando cambia la entrada activa del historial.

Así es como se configura un detector de eventos popstate:

window.addEventListener('popstate', function(event) {
    if (event.state) {
        // Manejar el cambio de estado
        console.log('La URL cambió a: ' + document.location.href);
        console.log('Datos de estado: ', event.state);
    }
});

Este código escucha los eventos popstate y registra la nueva URL y los datos de estado cuando ocurren.

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('La URL cambió a:', url);
  // Agrega tu lógica personalizada aquí
}

Actualización del contenido de la página

Cuando la URL cambia, a menudo es necesario actualizar el contenido de la página para que coincida con el nuevo estado. Esto implica cambiar los elementos de la página para mantenerlos consistentes con la URL.

Aquí tienes un ejemplo de cómo actualizar el contenido de la página:

function updateContent(newState) {
    // Actualizar el título de la página
    document.title = newState.title;

    // Actualizar el contenido principal
    document.getElementById('main-content').innerHTML = newState.content;

    // Actualizar el menú de navegación
    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');
        }
    });
}

// Usa esta función al agregar un nuevo estado
function changeState(newUrl, newTitle, newContent) {
    let newState = {
        title: newTitle,
        content: newContent,
        currentPage: newUrl
    };
    history.pushState(newState, "", newUrl);
    updateContent(newState);
}

En este ejemplo:

1. La función updateContent cambia el título de la página, el contenido principal y actualiza el menú de navegación.
2. La función updateNavigation resalta la página actual en el menú de navegación.
3. La función changeState combina la acción de agregar un nuevo estado y actualizar el contenido, manteniendo todo consistente.