CA6: Implementar la navegación en la SPA

[LicetLemus]

• [x] En sus vistas, puede utilizar enlaces de anclaje o con navigateTo para navegar a diferentes rutas. Recuerde que navigateTo debe tomar argumentos para pathname y props.

// import navigateTo

export const Home = (props) => {
  // ...
  linkEl.addEventListener('click', () => navigateTo("/about", { name: "Xochitl" }));
  // return el
}

Manejar hacia forward y back

• [x] Asegúrese de estar escuchando popstate en index.js y llame a la función onURLChange cuando hay un popstate. Cuando un usuario hace clic en un enlace o navega usando los botones atrás/adelante del navegador, se llamará a esta función para actualizar la vista mostrada.

// Handle URL changes
window.addEventListener('popstate', ({objetivo}) => {
   onURLChange(/* location */);
});

Probar la funcionalidad del search params

• [x] En una de sus vistas, experimente leyendo los parámetros de search de la URL y utilizándolos en el vista. Las funciones de vista deben tener un parámetro, llamémos props, que es un objeto con que podemos pasar información a las vistas.

export const Home = (props) => {
  const el = document.createElement('div');
  el.textContent = `¡Bienvenido a la página de inicio, ${props.name}!`;
  console.log(props.id);
  return el;
}