Crea una cuenta o inicia sesión

¬°Contin√ļa aprendiendo sin ning√ļn costo! √önete y comienza a potenciar tu carrera

Adquiere por un a√Īo todos los cursos, escuelas y certificados por un precio especial.

Antes: $249

Currency
$219/a√Īo

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Comprar ahora

Termina en:

1D
18H
46M
47S

Implementando routing del lado del cliente

5/13
Recursos

Aportes 23

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Un poco mas de como funciona history
Documentación sobre history

Al fin comprendí lo que hace el path.
Este curso debería estar antes del curso de SPA.

ALGUNOS M√ČTODOS DE HISTORY

window.history.back();

Nos permite ir un paso hacia atr√°s en nuestro historial

window.history.forward();

Lo opuesto a back(), nos permite movernos hacia adelante en nuestro historial

window.history.go(n);

Nos permite movernos n p√°ginas.
Por ejemplo, si n=-1 nos iremos una p√°gina atr√°s. Por otro lado, si n=1, iremos una p√°gina hacia adelante. Y si n=0, se recargar√° la p√°gina actual.

window.history.length;

Nos devolver√° el n√ļmero de p√°ginas en nuestro stack de historial

pushState(estado,titulo,url)

Se encarga de a√Īadir una entrada al stack de nuestro historial.
Estado es el objeto al cual esta asociado con la nueva entrada al historial creada.
Título, de momento es ignorado la mayoría de las veces.
Url es la ruta que ser√° a√Īadida a la nueva entrada de nuestro historial

replaceState(estado,titulo,url)

Trabaja de la misma manera que pushState() Con la diferencia que modifica una entrada, en vez de crear una nueva.

history.state;

Nos da el estado actual de nuestro historial

Fuente: https://developer.mozilla.org/es/docs/DOM/Manipulando_el_historial_del_navegador

Magnífico

jajajaaj solo es un meme

El método pushState()
pushState()toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y (opcionalmente) una URL. Vamos a examinar cada uno de estos tres parametros en más detalle:

##Object estado
El objeto estado es un objeto JavaScript el cual esta asociado con la nueva entrada al historial creada por pushState(). Cada vez que el usuario navega hacia un nuevo estado, un evento popstate event se dispara, y la propiedad state del evento contiene una copia del historial de entradas del objeto estado.

El objeto estado puede ser cualquier cosa que puedas pasar a JSON.stringify. Dado que Firefox guarda los objetos estado en el disco del usuario para que puedan ser restaurados despu√©s de que el usuario reinicie su navegador, se ha impuesto un tama√Īo l√≠mite de 640K caracteres en representaci√≥n JSON de un objeto estado. Si pasas un objeto estado cuya representaci√≥n es m√°s larga que esto a pushState(), el m√©todo arrojar√° una excepci√≥n. Si necesitas m√°s espacio, se recomienda usar sessionStorage y/o localStorage.

##Título
Firefox actualmente ignora este parámetro, aunque podría usarse en el futuro. Pasar una cadena de caracteres vacia aquí podría asegurar estar a salvo de futuros cambios en este método. Alternativamente podrías pasar un título corto del estado hacia el cual te estás moviendo.

##URL
La URL de la nueva entrada al historial está dada por este parámetro. Recuerda que el browser no intentará cargar esta URL después de llamar a pushState(), pero podría intentar cargar la URL más tarde, por ejemplo, después de que el usuario reinicie su navegador. La nueva URL no necesita ser absoluta; si es relativa, es resuelta relativamente a la actual URL. La nueva URL debe ser del mismo origen que la actual URL. Si no es así, pushState() arrojará una excepción. Este parámetro es opcional; si no se especifica, se tomará la URL actual del documento.

Puedes conseguir la guia completa Aqui!

Orale wow

Capacitación sobre window.history en JavaScript para aplicaciones de una sola página (SPA).
.
El objeto window.history proporciona m√©todos y propiedades para interactuar con el historial del navegador. Esto es especialmente √ļtil en las SPAs, donde los cambios de contenido se gestionan de forma din√°mica sin recargar completamente la p√°gina.
.
Aquí tienes una visión general de cómo puedes utilizar window.history en una SPA:
.

  1. Navegación hacia adelante y hacia atrás:
    • window.history.back(): Permite retroceder una p√°gina en el historial.
    • window.history.forward(): Permite avanzar una p√°gina en el historial.
    • window.history.go(n): Permite navegar a una p√°gina espec√≠fica en el historial, donde n puede ser un n√ļmero positivo o negativo para avanzar o retroceder varias p√°ginas.
      .
  2. Cambiar la URL sin recargar la p√°gina:
    • window.history.pushState(state, title, url): Permite agregar una nueva entrada al historial del navegador sin recargar la p√°gina. Puedes especificar un objeto de estado (state), un t√≠tulo (title) y una URL (url) para la nueva entrada.
    • window.history.replaceState(state, title, url): Permite reemplazar la entrada actual en el historial sin agregar una nueva entrada.
      .
  3. Manejar eventos de cambio de historial:
    • window.onpopstate: Un evento que se dispara cuando el historial de navegaci√≥n cambia, ya sea por un bot√≥n de retroceso/avance o por el uso de pushState() o replaceState(). Puedes agregar un listener para manejar este evento y actualizar el contenido de tu SPA en consecuencia.
      .

Es importante tener en cuenta que al utilizar pushState() o replaceState(), solo estás cambiando la URL y actualizando el historial del navegador. Para que tu SPA responda a estos cambios y actualice su contenido de forma adecuada, generalmente se utilizan en combinación con un enrutador o gestor de estado, como React Router o Vue Router.
.
Recuerda que esta es solo una introducci√≥n b√°sica al uso de window.history en SPAs. La implementaci√≥n espec√≠fica puede variar seg√ļn el framework o biblioteca que est√©s utilizando.
.
Si tienes m√°s preguntas o necesitas m√°s detalles sobre alg√ļn aspecto en particular, no dudes en hacerlo. Estoy aqu√≠ para ayudarte.

window.history.pushState({data:'Movimiento'}, 'Title','/');

Saben cu√°l theme es el que usa el profe en su VSCode ?

Hasta ahora todo bien explicado y comprendido.

Super la explicación del profesor

Entendido ūüėĄ

algo nuevo y aprendido hoy ūüėĄ

Entendido

pushState() Toma tres parámetros: un objeto estado, un título (el cual es normalmente ignorado) y la ruta a la cual nos queremos mover.

window.history.pushState({ data: 'Movimiento'}, 'Títle', 'path');

codigo de la clase:

// window.history.pushState
// Permite Pasar un nuevo estado a la aplicaciones, parametros:
// data: vamos a poner los datos q queremos guardar
// titulo:
// path: la mas importante aqui se pasa la ruta que nos queros mover

window.history.pushState({data:'Movimiento'},'Titulo','/path')

Si la aplicacion es muy grande, digamos ‚ÄúPlatzi‚ÄĚ, ¬ŅComo afecta el concepto de SPA a Platzi? porque para moverme entre secciones si recarga la pagina, otra cosa, ¬ŅComo es el Router en Backend? y si uso SSR ¬ŅCambia la forma del router?

pushState

Este metodo pertenece a la propiedad history y esta al objeto Window.

window.history.pushState({data:'Movimiento'},'Title','/');

Hasta ahora todo bien

VSC es tan bueno que incluso si alcanzan a ver arriba aparecen los parametros que recibe el metodo que se esta usando, por algo se convirtio en el editor favorito

Las posibilidades que te brinda la api son increíbles.

Super interesante estas etiquetas, lo las había llegado a usar en lo largo de la carrera de Arquitecto FrontEnd, no me quiero ni imaginar toda la cantidad de contenido que hay en la escuela de JavaScript