Como atualizar a URL do navegador sem refresh a página usando a vanilla JS History API
Tags: javascript, programming, portugues
Published: 2023-12-12 03:20:49

_**Nota:** apenas traduzi o texto abaixo e postei aqui._

Você pode usar a propriedade `window.location.href` para atualizar a URL do navegador.

```javascript
window.location.href = 'http://minha-nova-url.com';
```

Mas usar essa abordagem faz com que a página seja recarregada. E se você quiser atualizar a URL sem atualizar a página?

Hoje, vamos dar uma olhada na `History API`.

## A History API

A API History é um conjunto de métodos no `history object` que pode ser usado para manipular o histórico — aquilo que é acessado pelos botões de avançar e retroceder — do navegador.

Funciona em todos os navegadores modernos e até no IE 10.

## O método history.pushState()

O método `history.pushState()` pode ser usado para inserir uma nova entrada no histórico do navegador — e, como resultado, atualizar a URL exibida — sem atualizar a página.

Ele aceita três argumentos:

- `state`, um object com alguns detalhes abre a URL ou `entry` no histórico do navegador.
- `title`, que deveria ser o que a propriedade `document.title` deveria ser (mais sobre isso em breve).
- `url`, a URL para adicionar ao histórico do navegador.

## Um exemplo

Este método é útil principalmente com app de página única, onde você carrega conteúdo com JavaScript, mas deseja atualizar a URL para corresponder.

Por exemplo, digamos que você estava na `homepage` e deseja alterar a URL para refletir a página "about". Você pode fazer algo assim:

```javascript
history.pushState({ pageID: 'about' }, 'Sobre', '/about');
```

Se desejar, você pode ir para a `homepage` do meu site, copiar/colar na `console tab` nas `developer tools` e executar isso.

## Algumas pegadinhas

Como muitos métodos JavaScript, o método `history.pushState()` tem algumas pegadinhas.

Alguns navegadores impõem um limite de 640.000 caracteres no `state object`. Se você precisar passar dados de uma "view" para outra, e esses dados forem grandes, em vez disso, você deve usar um object vazio aqui e salvar esses dados com localStorage ou sessionStorage.

O atributo `title` é obrigatório, mas ignorado por todos os navegadores. Provavelmente nem deveria existir, mas foi originalmente fornecido com a API e não pode ser removido sem quebrar os sites que o utilizam.

Com base nessas duas coisas, o argumento mais importante, `url`, provavelmente deveria ser o primeiro, já que é o único que você realmente precisa para fazer o que deseja. Mas por alguma razão, é o último.

Independentemente disso, o método `history.pushState()` é incrivelmente útil para determinadas situações.

## Outras coisas que você pode fazer com a History API

### O popstate event

Se você usar `history.pushState()` para atualizar a URL, quando o usuário clicar nos botões de avançar ou retroceder, a URL mudará, mas a IU não.

Você pode usar o método `popstate` para detectar essas alterações de URL e fazer alterações na interface do usuário conforme necessário.

```javascript
window.addEventListener('popstate', function (event) {
    // A URL mudou...
});
```

Antes aprendemos que a primeira propriedade passada para o método `history.pushState()` é `state`. Você pode acessar essa propriedade no `event object`.

```javascript
window.addEventListener('popstate', function (event) {
    // Loga os dados de state no console
    console.log(event.state);
});
```

### Avançando e retrocedendo no History

Você também pode avançar e retroceder no histórico do navegador com alguns outros métodos na History API.

O método `history.back()` volta uma página e o método `history.forward()` avança uma página.

Você pode avançar ou retroceder mais de uma página usando o método `history.go()`. Passe o número de páginas para pular. Use um número positivo para avançar e um número negativo para retroceder.

```javascript
// volta 2 páginas
history.go(-2);

// avança 3 páginas
history.go(3);
```

### Compatibilidade de navegadores

O `popstate event` e os métodos `back()`, `forward()` e `go()` funcionam em todos os navegadores modernos e até o IE 10.

## Fonte

Newsletter de [Go Make Things](https://gomakethings.com/)