javascript - w3schools - Cambiar URL sin actualizar la página

react change url without reload

Question

Me gustaría reemplazar una URL sin actualizar la página.

Necesito cambiar:

https://example.com/en/step1

a

https://example.com/en/step2

Como hacer eso ?

Answer 1

Cuando usas una función ...

<p onclick="update_url(''/en/step2'');">Link</p>
<script>
function update_url(url) {
history.pushState(null, null, url);
}
</script>

Answer 2

Actualizar

Basado en Manipular el historial del navegador , pasar la cadena vacía como segundo parámetro del método pushState ( también conocido como título ) debería ser seguro contra cambios futuros en el método, por lo que es mejor usar pushState como:

history.pushState(null, '''', ''/en/step2'');

Puedes leer más sobre eso en el artículo mencionado.

Respuesta original

Utilice history.pushState esta manera:

history.pushState(null, null, ''/en/step2'');

• Más información ( artículo de MDN ): Manipulación del historial del navegador
• Puedo usar
• Tal vez debería echar un vistazo @ ¿Internet Explorer es compatible con pushState y replaceState?

Actualización para responder al comentario de Idan Dagan .

P: ¿Por qué no usar history.replaceState() ?

A: De MDN

history.replaceState () funciona exactamente igual que history.pushState (), excepto que replaceState () modifica la entrada del historial actual en lugar de crear una nueva

Eso significa que si usa replaceState , sí se replaceState la URL, pero el usuario no puede usar el botón Atrás del navegador para regresar a la versión anterior. Estado (s) más ( porque replaceState no agrega una nueva entrada al historial ) y no se recomienda y proporciona UX incorrecto.

Actualizar para agregar window.onpopstate

Entonces, como esta respuesta llamó su atención, aquí hay información adicional sobre cómo manipular el historial del navegador, después de usar pushState , puede detectar la navegación hacia atrás / adelante mediante el uso de window.onpopstate como este:

window.onpopstate = function(e) {
// ...
};

Como el primer argumento de pushState es un objeto, si pasó un object lugar de un null , puede acceder a ese objeto en onpopstate cual es muy útil. A continuación le onpopstate cómo:

window.onpopstate = function(e) {
if(e.state) {
console.log(e.state);
}
};