Enrutamiento en Gatsby - Tutorial de React.js

Te voy a mostrar cómo podemos ir componiendo la navegación, las rutas, dentro de una aplicación utilizando Gatsby con React. Acá estoy dentro de un proyecto utilizando Gatsby y voy a entrar específicamente a la carpeta src > pages. Dentro de esta carpeta, cualquier archivo que nosotros generemos se convertirá en una página. Así que vamos a crear una página. Venimos acá a esta carpeta. Creamos un archivo y lo llamaremos nosotros.js. Dentro de esta carpeta, lo que podemos hacer es crear una aplicación en React. En este caso, yo ya tengo una previamente diseñada. Voy a insertar acá la información y, como puedes ver, esto es un componente basado en React, donde estoy trabajando con los elementos estándar, con un return y haciendo un export de este componente. También estoy insertando algunos componentes comunes para desplegar la información. Y ahora que hemos creado este archivo nuevo llamado nosotros, vamos a venir acá a la aplicación y incluimos un slash y el nombre del archivo, nosotros, presionamos Enter y vemos cómo ya se muestra la información con el archivo que hemos generado. Ahora ya tenemos la estructuración de un documento de las rutas de nuestra aplicación. Si queremos navegar dentro de este documento, tenemos dos formas. Yo ya tengo un componente creado llamado BarraNavegacion. Acá, en este componente, vamos a ver que tengo ya varias rutas. Tengo acá la ruta hacia nosotros y hacia contacto, que están funcionando correctamente porque están apuntando a diferentes sitios que ya tengo definidos dentro de Gatsby. Sin embargo, podemos mejorar la carga de nuestras aplicaciones para que se haga de forma asincrónica y también que solamente cargue la información necesaria eliminando esta etiqueta href y reemplazándola por el componente Link. Acá, importante que, cuando importamos Link, lo hagamos desde el paquete de Gatsby, como se muestra acá en la línea 1 de mi código. Ahora, una vez que ya tenemos este link, vamos a definirlo para que apunte hacia otro lugar, donde lo hacemos a través del atributo to. Voy a copiar el resto de elementos que aparecen dentro de este href, porque la idea es que esto reemplaza un href y va a desplegarse exactamente igual a uno de ellos. También, al final de esta línea 14, vemos que, como esto era antes un anchor, una a, vamos a cambiarlo también para que sea ahora un atributo Link. Podemos repetir el proceso, por ejemplo, para que se note dentro de el momento en que nosotros cargamos la página inicial y reemplazamos este anchor o este enlace por un Link. Vamos a dejar este de contacto tal cual como está acá y vamos a ver cuál es el resultado. Vamos a refrescar, clic derecho, Inspeccionar, entramos acá a el apartado Network y vamos a ver cómo se realiza la carga de mis aplicaciones. Vamos a ir a Home, clic derecho, vamos a purgar la caché y vamos a ver qué es la información que se está cargando. Por ejemplo, al pasar a Home, vemos que, por ejemplo, si yo quiero pasar a Nosotros, no se hizo ninguna carga. ¿Por qué? Porque ya la información estaba disponible, no tuvimos que hacer ninguna carga. Si entramos a Contacto, que lo estamos haciendo de la forma... que lo estamos haciendo de la forma tradicional, o sea, vamos a hacer una carga completa, vemos cómo se realiza una carga, vemos que tenemos ya varios elementos que se están cargando, por ejemplo, acá se cargaron 17, mientras que si vamos acá a Nosotros, solamente va a cargar la información necesaria y no tiene ningún impacto, o prácticamente ninguno, sobre nuestra aplicación. Utilizando este formato de Link, vamos a hacer que nuestras aplicaciones puedan navegar aún más rápido utilizando Gatsby.