Introduction to the JAMStack Introduction to the JAMStack

Setting Up Client Routes in Gatsby

Check out a free preview of the full Introduction to the JAMStack course:
The "Setting Up Client Routes in Gatsby" Lesson is part of the full, Introduction to the JAMStack course featured in this preview video. Here's what you'd learn in this lesson:

Jason explains that in order for the dashboard app to respect the client-side routes in Gatsby, an API hook needs to be used, and demonstrates how to set up private routing in the dashboard application.

Get Unlimited Access Now

Transcript from the "Setting Up Client Routes in Gatsby" Lesson

[00:00:00]
>> Now we've got the basics of an app setup, right, we can go to a dashboard, but we need to actually do something with this dashboard. In order to get the dashboard to respect the client-side routes in Gatsby, we need to use an API hook called onCreatePage. So we're just gonna export a function, exports.onCreatePage, and Gatsby will run that.

[00:00:24] So this is going to give us two things. A page object, which is the page that is being loaded, and then actions that we can perform on that page. So, inside of this, we're gonna check if the page path matches, and we're gonna use a regular expression for this.

[00:00:44] So we're gonna check if it matches dashboard. And as long as it starts with dashboard, then we know that we wanna rewrite it to the dashboard component. So to make that happen, we use page.matchPath. And we're gonna set that to equal any extension of dashboard. So dashboard slash anything is gonna get rerouted to the dashboard component.

[00:01:08] And once we've made this change, we're going to hit actions.createPage and pass in our page. So upon doing this, we can stop and restart. And once this gets running for us, We should be able to see that over here, now we hit our dashboard. Any route will bring us back to the dashboard.

[00:01:38] So this gives us the ability now to actually build a dashboard that will have private routing in it.