Today I’m going to share a little bit about Gatsby’s route. As I’m always learning new tools and technologies, a couple of days ago I came across Gatsby and was super curious about what it is and how it works? So I went through Gatsby’s documentation and what I found out was something very interesting.
I’m sure you have already guessed it by the title, we will discuss Gatsby route functionalities. I am going to show you the difference between these two ways of using routes. I am going to compare one of my React projects with this newly created Gatsby project. I am not going to show the whole process of creating an app and how it functions, however, it will be a topic for a future article.
Before I dive into detail, here is a brief definition of Gatsby from Gatsby’s documentation: “Gatsby is a React-based open-source framework for creating websites and apps. It's great whether you're building a portfolio site, blog, a high-traffic e-commerce store, or company homepage.”
Okay, Let’s get started:
First, we will go through the React route.
Above I have an index.js file from my React app. To run this file in the browser I have to install the react-dom package and import ReactDOM in this file in order to render it. In this case, I’m rendering an App component, so let’s have a look at the App component:
Here, as you can see, I am importing all the components that I want to make a route with, then I have to install the react-router-dom package to import BrowserRouter and Route. After that, I am adding them to the App class component. Also, we need to give the exact path so that it renders only the associated page in each route. Once the route is set I need to link them in the Navbar component. Here is how that looks:
Ignore all the class names and ul/li tags for now and let’s focus on Links. Here also we have to import Link from react-router-dom then add links. This is the whole process of React route to work. It looks something like this in the browser:
It’s all functioning properly. Now let’s do the same thing with the Gatsby app. First, let’s look at the index.js file:
Here all we have is a functioning homepage that is returning the Navbar component. Now let’s move on to the Navbar file:
Here all I did was import Link from ‘gatsby’ then return Links inside the Navbar function. I did not add all of the class names and ul/li tags in order to keep it clean, so it won’t look exactly the same as my React Navbar but functionality wise it works exactly the same. That’s it and now you have fully functioning Navbar routes. There’s no need to install any router or anything manually. The only thing you need to do here is to add your route pages inside the ‘pages’ folder where you have your index.js file and it will automatically work as an additional route. The ‘index.js’ file is the homepage and all other files you add on the same level become additional routes. Here is the Navbar from the Gatsby app:
Let me know what you guys think about this. I really find it easy to use, however, I am sure there are complicated factors but I am looking forward to diving into more detail soon.
Top comments (1)
Great article! It helped me understand routing in Gatsby. It's a lot cleaner. I've also wondered how to keep the navbar on top of each page without importing the NavBar on each page. I've actually made a Layout page for that and added the navbar on top, then wrap all my pages with the Layout. Any thoughts or other techniques?