Setting Up Client Routes in Gatsby

[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.