Wiring Up Client-Side Routes

[00:00:00]
>> There's one problem here which you may have noticed, which is that if we go to our home page, and we click this link, it takes us to /dashboard. And we didn't set up a route for that. And I'm actually okay with that, I don't think that we need a route at the end.

[00:00:15]
But we do have to set up a redirect so that we end up in the right place. So let's say that if you hit dashboard, and we wanna be redirected immediately to the login, that's what we want. So let's just set that up to exist. And to make that happen, I'm gonna use the useEffect hook in React.

[00:00:35]
It's basically a way for us to say when this component changes. So when it mounts, we want to check what's going on and then and modify it. So I'm gonna set up useEffect that accepts a function and then an array of dependencies. And anything in this array that changes will cause this effect to run again.

[00:00:58]
So what we wanna do is get the location. And because this is a gatsby page, it gives us a helper of the location, right in the props. It's just available for us, so we don't have to worry about getting it. If we needed to, we could also use the URL API from the browser to get that.

[00:01:17]
But since we already have it, we don't need it. So what I wanna do is I wanna check if the location path name, if that matches, just dashboard straight up. So it starts with dashboard, and it ends with either of trailing slash or just with dashboard and nothing after it.

[00:01:39]
And we use a dollar sign to indicate that that's the end of it, there's nothing afterward. Then we know that that is where the root dashboard. So if that's true, we're going to navigate. And this navigate function comes from gatsby. So I'm gonna import navigate from gatsby. And this is something that's also built on Reach Router.

[00:02:07]
It's to kind of provide it as a convenience so that we can do custom navigation. And inside of this, what's it complaining about? If location. There we go, that's what it didn't like. I forgot to close my regular expression. Then we're gonna navigate to dashboard/login. And because we don't wanna get into redirect loops, we're just gonna replace the history.

[00:02:36]
And what that means is when we get redirected, we want it to instead of sending us back to /dashboard which would then immediately redirect us, we want it to just replace that history item with the login. So that when we click forward, if I hit back, it doesn't immediately redirect me to where I was.

[00:02:53]
It lets us get back to that homepage. So that's what we're looking for, is that we can log in. And I believe this would be a good spot to save our work. So what we're doing here, just to recap, is we've now set up a fully functioning app, but we haven't authenticated anything yet.

[00:03:14]
We've got a dashboard, the client side routing is working. This will work on the server on the client side, and we can get between these pages. And if we just go to the straight dashboard, it will take us to the login page.