Gatsby Routing

Last Updated : 12 Apr, 2022

Gatsby is a free and open-source framework based on React that helps developers build blazing-fast websites and apps. Gatsby’s sites are fully functional React apps, so you can create dynamic web applications that are fast, responsive, and secure.

Introduction: When building a website, one of the most important aspects is routing. Routing is the process of mapping URLs to content. Without proper routing, a website would be a jumbled mess of pages with no structure. Gatsby is a static site generator that uses React for its frontend. When building a Gatsby site, you have the option to use a variety of different methods for creating routes.

No matter which router you choose, it’s important to understand how routing works in order to create a well-structured website.

Features: Routing is one of the most important aspects of web development, and it is also one of the most misunderstood. Routing allows you to create custom URLs for your website, and it also allows you to control how your website responds to requests from users.

Routing can be used to improve the usability of your website, and it can also be used to improve the performance of your website. Routing can be used to redirect users to different pages on your website, and it can also be used to handle different types of requests from users.

Routing can be used to create custom URLs for your website.
Routing can be used to control how your website responds to requests from users.
Routing can be used to improve the usability of your website.
Routing can be used to improve the performance of your website.

Setting Up Environment:

Step 1: Run the below code in the terminal to create a new Gatsby site.

npm init gatsby

Give the name ‘gfg’ to the application project.

Step 2: Move to the new ‘gfg’ folder using the below command.

cd gfg

Project Structure:

Creating Routes: To create a route in Gatsby, you can simply create a new page with a React component inside the ‘src/pages’ directory. It will automatically create a route for that page in your application. For this, let’s create a new page name ‘gfg.js’ inside our pages folder. Add the below content in the ‘gfg.js’ file.

gfg.js

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

Now add the below code in your ‘index.js’ file.

index.js

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