Building a Header and Navigation: React Tutorial

Reed Barger
A free video tutorial from Reed Barger
Professional Web and Mobile Developer
4.5 instructor rating • 20 courses • 40,308 students

Learn more from the full course

Awesome Apps with React Hooks and Firebase

Learn cutting-edge React along with the most popular serverless framework by building a Hacker News Clone

02:38:08 of on-demand video • Updated May 2019

  • Build amazing realtime, serverless apps with React Hooks & Firebase + Firestore
  • Learn how to use cutting edge React features with the most popular serverless platform
  • Create and ship high-quality web apps
English [Auto] Now that we've declared all of our roots within our app component we need to provide some links to allow users to navigate around more easily. So let's add a common header component. It'll be up at the top of every page that includes these links. So to add this header to put it in every page we need to put it above all of our declared routes to do that. First add within our router tags a div and this div will have the class name app container. And here is where we'll put our header component and we'll import it from dot slash header. Then after our header we'll add a div where all of our routes are going to be put the class name root container. So we'll just grab our entire switch and everything in it and move it up into that div. So then when we save and flip back we see that the header is now above every single route every single component for each route. So now to add the links within header we'll go to header dot J S and first we need a couple of things from our router package we need with router to provide header information about the current route as well as nav link to create each link. So first since with router is a higher order component we need to wrap our exported header component with it then within our returned JSA X into first add a div with the class name header within it. Another div the class name of flex. This will apply flex box here. The first thing that will have on the left hand side of our header is an image the site logo. The source of it's going to be from slash logo dot PMG. This is reading from our public folder then the old text will be hooks news logo. Then the class will be logo underneath this. We'll have our first nav link where we need to set the to prompt to the right. We want to go to this first one we'll just be forward slash to go to our root route and the class name for it will be header dash title. And this is going to include our app title hooks news. After that we'll include another nav link this time with the text knew to go to our new route which is just the same as our route route as we saw so we'll navigate users to just forward slash. But this time the class will be header link. Then we'll include a divider just a vertical bar. We'll give a div the class name of divider and within it include this vertical line. Then after it will include another nav link to go to the top round the top links route. Also with the class name header link with the text top then we'll follow this with another divider and after that and have links in the next link will be to slash search and the text will be search. After that we'll add another divider and NAV link in this link here. We'll go to slash create the text submit to submit a new link so everything within this div will be on the left hand side of our header then on the right hand side include everything within a div with the class name of flex. And for now we're just going to have a nav link. It's going to go to the log in route with the text log in so let's check out what we have. Let's save. And now we have a much better looking header with the title logo and a number of links that will allow us to navigate around our site.