URL sin recargar en JavaScript

pushState cambia la barra de direcciones; popstate te avisa del botón atrás.

function navigate(path, { push = true } = {}) {
  if (push) {
    history.pushState({ path }, "", path);
  } else {
    history.replaceState({ path }, "", path);
  }
  render(path);
}

function render(path) {
  const [, lang, tour] = path.split("/");
  document.title = tour ? `${lang} - ${tour}` : lang || "typestar";
  return { lang, tour };
}

window.addEventListener("popstate", (event) => {
  render(event.state?.path ?? location.pathname);
});

Cómo funciona

1. pushState agrega una entrada; replaceState reescribe la actual.
2. El manejador de popstate es donde vuelves a renderizar.
3. La URL debe mantenerse en el mismo origen.

Palabras clave y builtins usados aquí

• const
• document
• else
• function
• if
• return
• window

El intento, en números

Líneas

18

Caracteres a escribir

425

Tokens

133

Ritmo de tres estrellas

105 tpm

Al ritmo de tres estrellas de 105 tokens por minuto, este intento toma unos 76 segundos.

Escribe este fragmento

Paso 1 de 2 en URLs y formato; paso 11 de 13 en El navegador.

← Anterior Siguiente →