How To Create A Navbar In React With Routing

in today's video we're going to create this fully functional navbar in react which has active link highlighting and properly refreshes only certain parts of the page and best of all i'm going to show you how to do it using react router and without using any router library at all so you can truly understand exactly how this works [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner in this video we're going to create the navigation that you see here we have different links we can click on them and you can see that the active link is highlighted same thing with this about page then we can go back to the home page really simple navigation i'm going to show you how to use react router to create this and also how to create it without using any router at all so to get started i just have a boilerplate create react application i deleted out all the code we don't need and we're just left with a simple h1 now to create this really simple navbar we're just going to create a component for it we're just going to call this navbar.js and here we're going to export a default function which we're going to call navbar and inside here is we're going to put all of our navigation code and it's going to be really pretty straightforward it's just going to be some jsx so we're going to want to have a nav element which i'm just going to give a class here that we can use this later so we'll give it a nav class and then inside of here i want to have a link for the left hand side so this is going to be our site over here that's going to be a link that leads to our home page just like this and we're going to call it site name you can call this whatever you want also i'm going to give this a class so we can style it specifically because i want this to be styled with you know that like larger font so we're going to call it site title then below this we're going to have this list on the right and generally when i'm doing a navigation like this i like to use an unordered list so i'm going to use an unordered list and inside of here i'm going to have an li element for each one of the pieces of my list inside those lis i'm going to have an anchor tag and that anchor tag is going to have our href so for example we're going to have our pricing page and that's just going to say pricing inside of here and then we're also going to have our about page which is going to say about just like that now if we go into our app real quick we can just render out that nav bar component so we can just come in here and say nav bar make sure that that gets imported at the top of our page and if we save both these files and we come over here you can see we have our nav bar but obviously it's not styled how we want it to be and also it looks like i forgot to put each one of these in their own individual li so let me make sure i do that real quick there we go now they're both on their own li so now what we need to do is actually make this style correctly so i'm just going to use a simple stylus sheet for that i'm just going to import styles.css and i'm going to create that styles.css file and inside of here the very first thing i like to do is just to set up my box sizing so we're going to use border box and on my body i'm going to say that there's going to be no margin now with that done we can work on styling out our nav it's going to be pretty straightforward let's select that nav element i'm going to give it a background color here which is 333 and a color of white so the text is going to be white next thing i want to do is i want to make sure i use deflate display flex here and that's going to allow me to space everything out how i want it so for example i can justify my content with space between that's going to push these different elements to the left and the right side of the page in order to make the link show up let's just select those anchor tags make sure that the color here is set to inherit there we go so we can see those white links so you can now see they're pushed to the sides if i use a line item center that's going to center them vertically which looks really good and then what i can do is i can specify a gap of 2 rem and then some padding on the left and right of one rem so the gap puts space in between my elements so if they get too close together there'll be space between them and then the padding is giving me space on the edges so they aren't quite touching the edge of the screen now the next thing i want to do is i want to make it so these links and such look a little bit better so in order to do that what i'm going to do is i'm going to come down i'm going to take my nav i'm going to select the ul itself i'm going to get rid of all the padding and the margin that are on here by default and then i'm going to say that the list style is going to be none that's just going to get rid of all the extra spacing and get rid of that you know circle on the left hand side of my different list elements that looks really good also i'm going to specify this as a display flex with a gap of 1 rem and that's just going to put some space in between these different elements now if we move down what we can do is we can actually start styling out our nav itself with this anchor tag but also i want to style out that site title by just increasing the font size the 2 rem so it's a little bit bigger now on our actual anchor tags text decoration should be none because we don't want those underlines that looks a lot better already and now what i want to do is i want to work on that like active class making that work so what we're going to do is we're going to take our nav here and what i want to do is i want to get the li that has the active class on it i'm going to specify a background color of whoops 555 and then on hover i want to have a different background color so if we come over here we hover this i want to have a background color of 777 so now if i save when i hover over these you can see that i get that background color and if i apply that class of active for example to this first li you can see that now has a different background color but you'll notice that the actual height is not quite right and also i should make my active class go above my hover so that way when i hover the active one it'll change the background color there we go now i just need to make sure that this is essentially full height because right now my link right here is not full height so we can change this to a height of 100 percent oops a display here of flex and we just align our items in the center that'll make sure our text stays in the center and then we can just give some padding to it which is a 0.25 rem now as you can see that worked a little bit the only thing we have left to change is to make it so that our actual ul element spans the full height and we can just do a line items of stretch and that should actually fix that force and there we go that works perfectly so now when we hover these we get this nice highlight effect and which everyone's active has that background color being applied to it so it's like the really basic styles we need you could obviously make this look much better but the real core here is that we have this active class that does something so that way we can use that inside of our javascript and our react code so now that we have our navbar what i want to do is i want to create some pages and these pages are just going to be the text of home pricing and about so there's going to be separate components that contain all of our code for that page so let's create a folder called pages and inside here i'm going to create a new file we're going to call this one home.js and inside of here export a default function called home and all this is going to do is return an h1 with the text home inside of it really super straightforward i'm going to do that for all of our different pages so we have here our about page and we also have our pricing page inside of our pricing page i just wanted to say pricing and instead of home or inside of about i wanted to say about so now we have three different components one for each of our different pages i want to render out those components dynamically depending on what page we are on so right now when we click on these links you can see it refreshes our page and then our url changes to slash pricing so inside of our app here we can actually get the url on our page by saying window.location so if i just console log this out you should see here if i inspect my page and bring this over we look at our console you can see our location here has a bunch of information but most importantly we have our path name which is set to slash pricing so we can really easily just take this path name and do a simple switch statement over it so we can say here that we want to do a switch statement and the switch statement is on our window dot location whoops location dot path name and here if we have the case where it's just going to be the home page we're going to do something specific so i'm going to put that in there with a break then what i'm going to do is i'm going to say hey you know what if we're on the pricing page which is slash pricing then we're going to do something else specific and break and then finally we have our slash about page and we're going to have a break here as well so now for our different pages we just want to create a variable let's just call it like component and it's going to not be equal to anything by default and what we want to do in here is we're going to say you know what component here is going to be equal to our app and down here our component is going to be equal to pricing and down here our component is going to be equal to that about page and then we can just render that out so we'll just come to here and we're going to come down and render our custom component now one thing that is important to make sure that you understand is if you are using this custom component that you need to render out by name you need to make sure you use a capital letter otherwise it's going to try to render out a normal html component which is obviously a problem otherwise what you could do is you could say that you know you have your app here you have your pricing here and you have your about like this and we could just call this anything you know it could be a lowercase component in that case let's replace all those and then down here we would just render that out like this so either way is going to work we'll just leave it like this for now now all we need to do is import all those pages that we just created so we have pricing ohm and about so now if we come back over to our application we have some errors it looks like we'll just clear those out refresh to make sure now those errors exist as you can see they don't and now we have our pricing being shown if we go to about you can see it says about if we go to our home page if we just give it a second to load here it shows so this app right here but it looks like we have maybe an infinite loop or something going on it actually looks like the problem is i just put app here instead of home that is giving us an infinite loop so now if we just bring this onto a new tab there you can now you can see i close that we have our different pages showing up properly now we just need to make it so the active page is actually going to be showing up as the active one also before we do that i kind of want to put this text inside of its own little container so we can just create a div here with a class name of container and then inside of that div we can render out this component and then we can go back to our css here and we can just scroll up to the top we can say dot container what i want to do is i want to give it some margin on the side top and the bottom and i also want to text align it in the center there we go cause now we have our text dead center it just looks a little bit better so now let's focus again on that active styling the first thing that we need to do is we actually need to get that active page so we can just use this window.location.path name inside of our navbar we'll go into our nav bar and we have essentially our path which is equal to this and what we want to do is we want to see if our path is equal to this href right here and that's how we're going to add that active class or not so a really easy way to do this is going to be creating a custom component that wraps our link so we're going to do that we're just going to create a custom component we'll call it custom link inside of this custom link we're going to pass it essentially an href so we just say href here and that's all we're really going to care but we might also pass some custom props so we're going to make sure we take those into account so like if we pass a class name along to here we're going to make sure that gets taken into account so inside of this custom link we're just going to return essentially our li with the link inside of it and what we want to do is we want this section right here to be our children so we can come in here with our children and then we have our href right here which is just going to be equal to our href so now i can essentially replace this with our custom link and that custom link just has the text pricing inside of it if i can spell properly and it's going to have this href being passed in as well just like that and i can do the exact same thing for our about page so now all i've done is essentially simplify my code and the reason i'm doing this is so i can take this path variable i can use that inside of our custom link also i want to make sure i pass along any other props that we have with this path variable i can determine is this the active path because if our path is equal to our href and then we know that this is active so what we can do is we can just take that code and we can say our li has a class name which is going to be equal to here if these are equal then our class is going to be equal to active otherwise our class is equal to nothing and with that one simple change now if we go to our pricing page you can see that's marked as active look at our about page you can see that's marked as active so no matter what page we go to it's always going to be marked as active now obviously this is not the most scalable solution and the main reason for that is if we go back into our app here is we have this giant switch statement which is not the most clean thing in the entire world and every time we change a page it actually refreshes our entire application when in reality the only thing changing is this one h1 right here the nav bar never changes only the component section changes so we want to fix all that and the easiest way to fix all that is by using a routing library such as react router so in order to get started with react router we're just going to come down into our terminal and we're going to install the rack react router library and the react router library that we want is going to be specifically for the dom so we're going to download react router dom hit enter and that's going to download all the libraries that we need for react router if we come into our package json we give this a second you're going to see right here we have our react router dom being installed so we can actually use that now to use react router there's a few things that you need to set up first of all you need to set up what type of router you're using and then you need to define all your different routes what we want to do is we want to go into our index page and here's where we set up our actual router that we're going to be using so we're going to do a quick import here that's coming from that react router dom and what we want to import is a browser router and that's just because we're in the browser react router allows you to do routing for things like mobile applications and so on but for us we're creating a web application in a browser so we're going to be using the browser router now what you want to do with this browser router is just wrap your entire application so we're going to come in here with that browser router and again we're wrapping that entire app component because our entire component is going to be using this one single router to manage all of the routing now the next thing we need to do is define that router and all the different routes inside of it to do that we're going to come in here and essentially replace the switch statement with react router code so again i'm going to come up here with an import statement at the top and this is again going to be importing from that react router dom and i want to import a route and i also want to import the routes component these two components allow us to define all of our routes and group them together so for now we can completely get rid of all of this code right here because we don't need any of this switch statement code and instead inside of our container where we're rendering out our component this is where we're going to use these two components of routes and route so our routes component is going to wrap everything so we're going to say routes and it's going to wrap all of our individual routes and this routes component essentially just says hey here's a list of different routes choose the one that fits best so we're going to define all of these routes as their own route component and each one has a path and this path for our example is going to be like the index page and then it's going to have an element and this is the thing it's going to be rendering out so in our case we're rendering out our home component just like that and then we can close off that route so now this is exactly the same as what we had in our switch statement but it's just handled by react router and they have a bunch of other things that they're going to do along with this so let's just paste this down a couple times so we have our pricing page and we also have our about page and our pricing is going to render out pricing and our about is going to be rendering out the about page so now if i save and start navigating around you're going to notice it actually doesn't change anything it still re-renders the entire page and that's because inside of our navbar if we just go to that component we're using normal a tags we need to replace this normal a tag with a link component that is from react router at the top here we're going to be importing the link component from react router dom and this link component essentially replaces our anchor tag so anywhere that you see an anchor tag we want to replace this with a link same thing down here we're going to replace this with a link but what's really important is that instead of using href we're using the word two essentially wherever you have an href inside of this you're going to replace it with two and it's going to work exactly the same so in our custom links we're also going to replace these with two and inside of here we're going to replace all instances of href with two so now if i save this you're going to notice when i click on pricing my whole page doesn't re-render just this section that is changing so if we go back to our app only the section inside this routes is changing and everything else stays the same so our nav bar stays exactly the same our container here stays exactly the same and again only this one section changes and our navigation bar up here at the top changes but you'll notice that our actual active classes don't work and that's because our page never refreshes at all so our window.location isn't really changing so if we go to our navbar here this path right here is not actually 100 correct and we can't really rely on this for this so instead you need to use react router's way of handling this and they have their own custom hooks you can use to make this work really well the main hook that you want to care about is the used match hook but we're also going to be using a hook called use resolved path so let's make sure we get that use match hook and use resolved path and i'll tell you exactly why you need both of these in just a second so use match allows us to compare essentially the current path that we are on to whatever path we want so we can compare it to this two property and use resolved path this is really important because the way the router actually works with react router and with normal link tags is you can have absolute paths like this which are like absolute you start with this forward slash and you go to the pricing page or you can have relative links that say you know what go to the pricing page relative to whatever page you're currently on so this use resolve path essentially allows you to take a relative or absolute path it combines it with the current path you're on and gives you the actual full path that you would be accessing so we're just going to pass in our two property here which is essentially our url that we're navigating to we're going to get that resolved path and essentially like i said this converts these relative paths to absolute paths and so on with absolute paths it's just going to make sure that your path is the full absolute path even if it starts out relative and then we can determine if this is active by just saying we want to use that match class so we could say use match and just use math you can pass it a string or you can pass it in essentially an object and with the object we want to pass a path which is our path name for our resolved path that's the same thing as like window.location.pathname and then i want to pass an end of true by saying end true we just essentially are saying that the entire path much must match because with react router you can actually do like partial matching and in our case we want to make sure that the entire url is exactly the same we don't want to worry about partial matching so this would you know be useful for example if you had like slash pricing if our current url was like pricing slash you know to do's or something this would not match because we put n true but if we get rid of the n true this would technically match because slash pricing is inside of you know if we're at slash pricings to do and we're comparing it against slash pricing they both have essentially the same start to the url so it could work but in our case we want to make sure we match the entire url and nothing else accepted so if this is active then we want to add the active class otherwise don't add it so now with that done you can see our pricing page is set to active click on about now it's set to active click on site name you can see that that is all working so every single one of our links is working now all that active class is being applied and best of all our page is only re-rendering the section in the middle the section that actually changes and it doesn't re-render all of our other stuff like the navigation up here and that's all it takes to create a basic react navbar now if you want to take this a step further you're going to need to learn react hooks and i have an entirely free course on react hooks that i'm going to link down in the description for you it covers every single react hook that you need to know again it's completely free and linked down in the description below so i highly recommend you check that out with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 352,267

Keywords: webdevsimplified, react, react navbar, reactjs, react js, react javascript, react js navbar, reactjs navbar, react javascript navbar, nav bar, navbar, nav bar js, nav bar javascript, navbar js, navbar javascript, beginner react project

Id: SLfhMt5OUPI

Length: 19min 16sec (1156 seconds)

Published: Tue May 24 2022