Creating NavBars in React

Something that I use a lot in React.js is NavBars. This is a navigation header that you can use to open different components or use it as static branding.

Import in App.js
Import in NavBar.js

First, you need to import it. I used react-router-dom and imported NavLink in my NavBar component, and BrowserRouter and Route into my App.js.

NavLink Code In NavBar.js

Now lets setup the NavBar links. We do this inside of NavLink tags. Firstly, we state what the link is gonna be. In this case, I use “/Motivation/” to keep consistency with how the app is going to be hosted. You don’t need to put name of the app, or something similar in there. After that is what is important. You should name this something similar to the component. I used keywords like “from” and “about” to keep it clear. Then I added padding. I recommend using this, as without it all the links will be with no spaces and can cause confusion. The final part of the tag is what the user will see. “Home”, “Submit Motivation”, and “About” are all things the user can read and understand what component will be.

NavBar code in App.js

Now we go to our App.js to finish everything up. First, we import the NavBar component into App.js. After we do that, we will wrap everything in a <Router> tag. Inside of there we call the NavBar. We then need to declare what component will open up in each path. We first get the exact path, which is what we set in the NavBar.js. We then declare what component will open.

NavBar on App

This is what the basic NavBar will look like on the app. You can make changes with it using different react-router-dom functions and css styles. I hope that this information proves helpful to anyone trying to build a simple NavBar.