Enrutamiento Gatsby

Gatsby es un marco gratuito y de código abierto basado en React que ayuda a los desarrolladores a crear sitios web y aplicaciones increíblemente rápidos. Los sitios de Gatsby son aplicaciones React completamente funcionales, por lo que puede crear aplicaciones web dinámicas que sean rápidas, receptivas y seguras.

Introducción: Al construir un sitio web, uno de los aspectos más importantes es el enrutamiento. El enrutamiento es el proceso de asignación de direcciones URL al contenido. Sin el enrutamiento adecuado, un sitio web sería un revoltijo de páginas sin estructura. Gatsby es un generador de sitios estáticos que utiliza React para su interfaz. Al crear un sitio de Gatsby, tiene la opción de utilizar una variedad de métodos diferentes para crear rutas.

Independientemente del enrutador que elija, es importante comprender cómo funciona el enrutamiento para crear un sitio web bien estructurado.

Características: El enrutamiento es uno de los aspectos más importantes del desarrollo web, y también es uno de los más incomprendidos. El enrutamiento le permite crear direcciones URL personalizadas para su sitio web y también le permite controlar cómo responde su sitio web a las requests de los usuarios.

El enrutamiento se puede usar para mejorar la usabilidad de su sitio web y también se puede usar para mejorar el rendimiento de su sitio web. El enrutamiento se puede usar para redirigir a los usuarios a diferentes páginas de su sitio web y también se puede usar para manejar diferentes tipos de requests de los usuarios.

• El enrutamiento se puede utilizar para crear direcciones URL personalizadas para su sitio web.
• El enrutamiento se puede utilizar para controlar cómo responde su sitio web a las requests de los usuarios.
• El enrutamiento se puede utilizar para mejorar la usabilidad de su sitio web.
• El enrutamiento se puede utilizar para mejorar el rendimiento de su sitio web.

Configuración del entorno:

Paso 1: Ejecute el siguiente código en la terminal para crear un nuevo sitio de Gatsby.

npm init gatsby

Asigne el nombre ‘gfg’ al proyecto de aplicación.

Paso 2: muévase a la nueva carpeta ‘gfg’ usando el siguiente comando.

cd gfg

Estructura del proyecto:

 

Creación de rutas: para crear una ruta en Gatsby, simplemente puede crear una nueva página con un componente React dentro del directorio ‘src/pages’. Automáticamente creará una ruta para esa página en su aplicación. Para esto, creemos un nuevo nombre de página ‘gfg.js’ dentro de nuestra carpeta de páginas. Agregue el siguiente contenido en el archivo ‘gfg.js’.

import React from 'react'
  
export default function RoutingGatsby() {
  return (
    <div>RoutingGatsby - GeeksforGeeks</div>
  )
};

Ahora agregue el siguiente código en su archivo ‘index.js’.

import * as React from "react"
  
const IndexPage = () => {
  return (
    <main>
      <h3>GeeksforGeeks - Gatsby</h3>
    </main>
  )
};
  
export default IndexPage;

Ejecute la aplicación: use el siguiente código en la terminal para iniciar la aplicación.

npm run develop

Producción: