React-Router And Navigation Bar..

 

Preparation is key to any project, that's why I didn't plan anything out. I knew the concept of what I wanted to create. I wanted a website with a reference point for everything I like to collect, the APIs needed to be readily available, to begin with as I didn't want to sort out storing or creating data for now. I wanted it to be as if I hadn't got a clue (which I mainly didn't) so that I can search and show the full process. 

So with that in mind, I went for it. First thing first I need a way to navigate around my site. A central Navigation banner that would allow my users to jump around the website with ease. This would be placed on top of every page on the site so needs to be clean-cut and simple. (The theme of my site)

So the choices I had already made were to use React-Bootstrap and react-router. Check out this blog post for more information on the reasons why.

Head to your terminal and cd into your react project (if you are not familiar with the basic terminal commands here is a post that can help). If you haven't created a react-project check out my quick guide here. Now that you are in your project directory run the following command:

npm install react-bootstrap bootstrap

This will now pull the react-bootstrap dependency into your project. If you are not 100% sure if it has worked. The first point of call is if there would be an error in the terminal, secondly, you can go take a look at your package.json file (here is my GitHub link example) and you should see something like what is below: 

Now that you have successfully installed the dependency on react-bootstrap. We need a way to route the user around. This is where react-router comes in. To install that dependency run the following command: 

npm i react-router

Once again if you're unsure if this has worked checkout your package.json file there will be a call to that dependency in there. Now we have got rid of the boring part let's dig into the documentation. The main documentation you want to take a look at is the react-bootstrap docs. This will give you an overall understanding of the dependency and what you can do with it. Now I'm just doing the shortcut part because this isn't a run of the documentation.

The quick guide or what worked for me was simple:

Add this import to your index.js file: import "bootstrap/dist/css/bootstrap.min.css"; and you should be good to go. 

The reason I choose react-bootstrap as it seemed to have all the basic components a dev would want. The list from the documentation is the following: Alerts, Accordion, Badge, Breadcrumb, Buttons, Button Group, Cards, Carousel, Close Button, Dropdowns, Figures, Images, List Group, Modal, Navs, NavBar, OffCanvas, Overlays, Pagination, Placeholder, Popovers, Progress, Spinners, Table, Tabs, Tooltips, and Toasts. As you can see the list is quite extensive but it offers exactly what we need out of the box. 

If you head over to the Nav bar documentation, the first one was exactly what I was looking for. 

It was simple, readable and it had the functionality I needed. The ability to quickly add links to the Nav bar and offer up dropdowns so that my Nav wasn't too messy. Plus the big copy button drew me in so that's exactly what I did. I created a Navbar component knowing that I would be using this and tweaking it in various places, it would be better to have it in one place and be able to change it everywhere if needed, a general Nav bar shall we say.  

The import you needed for your Navbar is = import {Navbar, Container, Nav, NavDropdown} from 'react-bootstrap';

So at this point, I had the skeleton of my Navbar component. I had created it and exported it (export default syntax) so it was ready to use in the App. Now what? 

How the hell do I call a component that I have now created inside my App. Using what I had learned from the last post in the App.js file. I cleaned it up and got rid of everything I didn't need from the basic App creation. Which is basically everything. So I had a clean App. Localhost:3000 was showing nothing and I was pretty sure I could now add my Navigation component. I just needed to figure out the syntax. After a quick google, it was pretty simple in the end. The syntax was as follows. 

<Navigatorbar />

Navigatorbar is the name of my component, and after a simple import Navigatorbar from './components/Navigatorbar is added to the top of the App.js file. My simple Nav bar was up and running on my page. It didn't do anything but it looked good. 

After a very simple text edit I now had what I wanted in terms of content. For you just add what your want, play with it a little bit get the setup you want. There are a few various easy styling edits you can do I went with the dark theme as it's smart and simple. For me, a way to get back home, a few links off to other pages, and a drop-down link for you to go off to the different collections you can search for was all I needed. 

Right, time for routing. What is routing I hear you say? Have you ever clicked a button on a website and it has sent you to the same website just a page within it? That's what we are trying to achieve. You would think it would be quite simple. But for some reason, I really struggled to find something on the web anything really. There was some wishy-washy reasoning and loads of people saying it's simple but for some reason for react I couldn't find the answer I was looking for. Simple routing solution. It's not rocket science it's something that every website does. Then I stumbled into a routing YouTube video (I am so sorry I can't find the one I watched if I do I will link it here) and it was just so simple.  

The imports you need = import { HashRouter as Router, Link, Route, Routes} from 'react-router-dom';

(Normally the setup would have BrowserRouter instead of HashRouter however because I was using Github pages I needed this I will explain in another Post) 

Now, all you need to do is wrap the copied Navbar in a <Router><div></div></Router> tag. This will give you access to the routing functionality. So now you have your copied Navbar in its own div and router tag, how does this actually allow you to route. Here is my example: 

Let's explain a few things:

• Navbar you should be comfortable with and you have had a little play. Same with the Nav.link content.
• Link as={Link} from my very basic knowledge of this. Just turns the Nav Link into a react-dom link. 
• to={"/url"} sets the URL that is used when the user clicks that Nav item. 

We have now set the foundations up for your new routing system in your app. The next question on your lips should be but how does the URL we have just set get linked to one of my pages? 

We need to add another <div> tag but inside of it there with the <Routes></Routes> tag. This is where the magic is going to happen. Here is my example: 

Let's explain a few things:

• Routes tag wraps your Route tags
• Route tag has path and elements passed. 
• path is the URL that that route will check for
• element is what it will load if that path is hit. So element should be the page you want the user to hit if they hit the URL passed. so for my example element={<Pokemom />} 

If you don't have a "page" component here is a quick example you can copy: 

so here is the example for your Navbar if you were to have a Home component like the one above: 

Now you should have enough in your react app to allow you to copy and paste and play around with routing and bootstrap. Have a tinker with the different dropdowns, styles, and combinations, and comment on what you have created I would love to see what you folks have done with it. 

My full working setup:

Errors to look out for. I didn't really run into any errors following the youtube video. One thing I did run into was to make sure that your Navbar is inside its own <div> and the Routes are inside its own <div> inside a wider <div> in the Router. Get that right and you will be able to route your users wherever you want. 

Scott