Como mudar a URL sem recarregar a página?

Usando o Método pushState()

O método pushState() na API de Histórico muda a URL sem recarregar a página. Este método adiciona uma nova entrada na pilha de histórico do navegador.

A função pushState() recebe três parâmetros:

1. Um objeto de estado: Este pode conter dados que você deseja associar à nova entrada do histórico.
2. Um título: A maioria dos navegadores ignora este parâmetro.
3. Uma URL: A nova URL a ser exibida na barra de endereços.

Aqui está um exemplo de como 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);
}

Modificando o Histórico do Navegador

Quando você usa pushState(), ele adiciona uma nova entrada na pilha de histórico do navegador sem recarregar a página. Isso permite que os usuários usem os botões de voltar e avançar do navegador para navegar por essas entradas do histórico.

Para manter uma navegação adequada para frente e para trás:

1. Escute o evento popstate, que é acionado quando o usuário navega pelo histórico.
2. Atualize o conteúdo da sua página com base no objeto de estado associado a cada entrada do histórico.

Aqui está um exemplo:

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

function updateContent(page) {
    // Atualize o conteúdo da sua página com base no parâmetro 'page'
}

Detectando Mudanças de URL

Para detectar mudanças de URL, especialmente quando os usuários clicam nos botões de voltar ou avançar do navegador, você pode usar o ouvinte de eventos popstate. Este evento é acionado quando a entrada ativa do histórico muda.

Veja como configurar um ouvinte de eventos popstate:

window.addEventListener('popstate', function(event) {
    if (event.state) {
        // Lidar com a mudança de estado
        console.log('URL mudou para: ' + document.location.href);
        console.log('Dados do estado: ', event.state);
    }
});

Este código escuta eventos popstate e registra a nova URL e os dados de estado quando eles ocorrem.

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 mudou para:', url);
  // Adicione sua lógica personalizada aqui
}

Atualizando o Conteúdo da Página

Quando a URL muda, muitas vezes é necessário atualizar o conteúdo da página para corresponder ao novo estado. Isso envolve alterar elementos da página para mantê-los consistentes com a URL.

Aqui está um exemplo de como atualizar o conteúdo da página:

function updateContent(newState) {
    // Atualiza o título da página
    document.title = newState.title;

    // Atualiza o conteúdo principal
    document.getElementById('main-content').innerHTML = newState.content;

    // Atualiza o menu de navegação
    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 esta função ao empurrar um novo estado
function changeState(newUrl, newTitle, newContent) {
    let newState = {
        title: newTitle,
        content: newContent,
        currentPage: newUrl
    };
    history.pushState(newState, "", newUrl);
    updateContent(newState);
}

Neste exemplo:

1. A função updateContent muda o título da página, o conteúdo principal e atualiza o menu de navegação.
2. A função updateNavigation destaca a página atual no menu de navegação.
3. A função changeState combina o empurrar de um novo estado e a atualização do conteúdo, mantendo tudo consistente.