Dynamic Routing in Gatsby

During my internship, I was developing a project named Group Expense, which required the implementation of dynamic routing. Let us understand what dynamic routing is all about.

What is dynamic routing?

Dynamic routing means there is only one page to which all the links are routed but the content and path of this page are dynamic for each and every link that is listed. The unique content and path are achieved by the unique identifier that is associated with each link.

In my project, I needed to create an Expense page with dynamic content and path for each listed group. In my case, I had the group IDs as a unique identifier for each group through which I enabled dynamic routing.
It was quite a challenge as I was unable to grasp the concept at first but ultimately it was fun to learn and was implemented successfully.

Let’s understand Dynamic Routing’s implementation in a manner that even an inexperienced developer can understand and implement it without any hassles.

1. Gatsby-node.js

In order to make dynamic routing or dynamic pages, we have to explicitly tell Gatsby that the path of these pages should be dynamic.

For that, we have to add the following configuration to gatsby-node.js. One can easily find this file in their project folder.

Here, in the createPage function, there are 3 parameters passed:

• path - Defines the initial path of the page. 
• matchPath - It is the actual path which will be displayed in the URL and the ‘*’ at the end denotes that this path is dynamic and this ‘*’ will be replaced by the unique identifier (in my case the group ID) associated with each link ( in my case group ) whenever that link will be clicked.
• component - It denotes the path of the page where our imported components will be rendered.

2. Groups.js

This is just a file in the src folder of the project. It contains all the imported components that need to be rendered.
Here we need to import Router from ‘@reach/router’

I have imported 2 components, HomePage and Expense wrapped inside the Router.
The HomePage renders a list of groups which are actually links and Expense contains the expense data of those respective groups.
Since we have a single Expense component for all the groups, only the content rendered inside the Expense component and its path will be dynamic. If you notice the path provided to the Expense component, there is this ‘:id’ which will replace the ‘*’ in the configuration file and ultimately, the group ID will replace it.

We have now set up our gatsby-node.js configuration for dynamic paging and the components that need to be rendered.
Let’s render the groups on the HomePage file now:

3. Setting up a clickable link

We need to wrap each group’s name in Link component on the HomePage.js where the list of groups is rendered. Link is basically used for navigating between internal pages of a Gatsby site. We need to import it from Gatsby.

After this, each group name needs to be wrapped inside the Link component in return() method.

Please note that { groupData[item].name } is nothing but the group’s name.
Here, ‘item’ denotes the group ID and as one can see it is passed on to the path making it dynamic and unique for each group name.

So, in this way, the path is made dynamic and this group ID is also passed on to the Expense component enabling the content of that particular group to be fetched and rendered.

Dynamic Routing Workflow:

1. As soon as a link/group is clicked in the HomePage.js file, it checks the gatsby-node.js file for the page to be rendered. 
2. From there it finds that the components to be rendered are available in Groups.js file.
3. In Groups.js, it finds the path to Expense component and as the unique ID/ group ID is already passed to the Link component, it appends this ID to the path of Expense page and routes to it with content fetched in accordance to that unique ID and if you see the URL of that page, you will find /groups/{ group ID }.

Once the link is clicked on HomePage.js   →   
gatsby-node.js ( understands that the pages are dynamically created with a path ( ‘/groups/*’ ) )   →   
Groups.js ( understands the Expense component has to be rendered )   →   
Expense Component ( ‘:id’ replaced by group ID passed through the Link Component )   →   
Expense page ( page is rendered with URL ( ‘/groups/ { group ID }’ ) )

I have 2 groups listed in this screenshot:

Now if I click on the first group, the URL of the Expense page opened is:

Similarly, if I click the second group, the URL is:

So, one can see clearly that the group ID is appended in the URL depending upon which group is clicked. And the data corresponding to this ID is fetched and rendered inside the Expense component of the Expense page. The unique identifier for the links can be anything that you define.

In this way, a single page rendering a single component i.e. Expense component is created each time a link is clicked. The content rendered inside that Expense component is dynamic in accordance with the unique ID of that link ( group in my case ).

This is what Dynamic Routing in Gatsby is all about, I hope it was easy to understand. 

Keep learning!