Navegando entre las páginas usando el componente Link
Esta es una serie de artículos que nos ayudará a crear la página de comercio electrónico de Hcode utilizando NextJS, React y JavaScript.
La primera parte de esta serie es la configuración, si aún no la has visto, recomendamos verla primero:
- https://hcode.com.br/#/blog/1-nextjs-introducao
- https://hcode.com.br/#/blog/2-nextjs-criando-a-primeira-pagina-com-nextjs-react-e-javascript
Ahora abramos VSCode, y abramos el archivo index.js y el archivo productos.js dentro del directorio pages del proyecto. A continuación, importaremos el componente next/link
En el ejemplo ponemos la etiqueta dentro de un componente Link, así podemos navegar por las páginas sin refrescar, además de eso, es posible navegar en el historial volviendo a la página anterior. Esto es increíble porque podemos navegar como una aplicación de página única, pero con historial activo.
Algunas limitaciones deben tenerse en cuenta, la única propiedad que colocamos en el componente Link es el atributo href="/endereco", mientras que la propiedad title se colocó correctamente dentro del elemento que está dentro del componente Link.
Ahora que ya sabemos cómo navegar entre las páginas, ¿conocemos un poco más sobre el sistema de Rutas de NextJS?
¡En el próximo artículo!
¡Hasta entonces!
Glaucio Daniel