Gatsby Tutorial #4 - Navbar & Links

Key Takeaways

all right then gang so now i have a few different pages it would be nice to create a navbar so we can link between those pages on the page and by the way i've deleted the test file inside projects because we don't need that anymore now just one quick thing before we go on when you're working with pages if you sometimes delete them or move them around you might get an error from gatsby in the browser now if you get that don't worry all you have to do is cancel out of the process down here where we run gatsby develop and you can do that by clicking control c that's going to cancel out of that then you can run gatsby develop again that's going to restart the server for us and hopefully then the error will go away all right then so what i'm going to do is create a new navbar component so where do we create this component well we don't create it inside the pages folder because that wouldn't make any sense the navbar is not going to be a page in itself it's just going to be a component that we can drop into other pages so what i'm going to do instead is create a new folder inside the source folder right here so new folder and i'm going to call this components now you don't have to call it components you can call it whatever you want but i'm going to keep my other non-page components that can be dropped into pages right here so inside here i create a new file called navbar now typically when i'm working with gatsby i generally start these with a capital letter these dropping components the pages down here i don't use capitals but the dropping components i do so i'm going to call this navbar.js this will be a react functional component called navbar okay then so i want to keep this really simple first of all i'm going to change the div to a nav and then inside here i'm going to do an h1 that says web oops let me create that tag first of all it's going to say web warrior cheesy name i know and then down here i'm going to do a div i'm going to give this a class name of links and that's just so that i want to style this later on i can do all right then so now i want several different links so you might think i use anchor tags but no we don't do that much like we don't do that in react applications we use a special component called a link component instead and that's the same as just using react on its own without gatsby that link component means that all the routing is handled in the browser only and we don't send extra requests for new pages to the server because if we didn't use that link component this would actually send a request to the server we don't want this to happen because when we get that initial page we want our application to behave more like a single page application where all routing is done in the browser so instead of this we need to do a link tag and what i'm going to do is just click on that and it should auto import it at the top so we import link from gatsby all right then so this thing right here has a prop called two and that is basically the href what route do we want to go to when someone clicks on this link now the first one is going to be forward slash and that is going to be just for the home page so let me duplicate this a couple of times the second one is going to be to forward slash about and that's for this about page so let's change the text to about and then finally i'm going to go to forward slash projects which remember is going to be this index page inside the project folder and right here i'm going to call this port folio projects like so if i can spell it that is all right so we have this component now and all we have to do is now nest this component into our pages now i'm not going to do it in all of them to begin with i'm just going to go to the index file over here and i'm going to nest it at the top of this file so first of all let me import it at the top so import navbar and it's going to be from then we need to come out of this current pages folder first so dot dot forward slash then into components then we want the navbar file all right so now we can nest that inside here nav bar like so okay then and again if you're struggling with any of this react code definitely check out my react series first because this is all pretty basic react stuff all right so now hopefully we should see this navbar content at the top of the homepage let me try this out yeah we can see it right here and if we click on one of these for example portfolio projects we see that page and it all happened really quickly because all the routing is happening in the browser now if i go to about we see the about page obviously we're already on the home page so that does nothing so that is our links done and that is our navbar done now what we could do is we could take this nav bar and we could place it at the top of every different file and then also maybe if we wanted a footer component we could create one of those and we could place that at the bottom of every different file and then the same for a sidebar if we had one of those we create a sidebar component and we'd nest that in each of these different files as well but it all gets a little bit too complex and hard to update if we're nesting three or four different layout components things that don't change over each page in our pages instead it would be nice to create a single layout component which incorporates the navbar the footer and anything else that's consistent across all pages and then just wrap all of our different pages right here with that single layout component and we're going to see how to do that next