Implementando routing del lado del cliente

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