Creating a navigation bar in react with Routing

Routing is a process in which a user is directed to different pages based on their action or request. React router is used to define multiple routes in the application, when a user types a specific URL into the browser, and if this URL path matches any route inside the router file, the user will be redirected to that particular route. In this article, we will create a fully functional navigation bar react using a react router.

React Router Components

Let’s look at some of its major components:

• Browser Router: Browser Router is a router implementation that uses the HTML5 history API(push State, replace State and the pop state event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components.

• Routes: It’s a new component introduced in the v6 and a upgrade of the component. The main advantages of Routes over Switch are:

  • Routes are chosen based on the best match instead of being traversed in order.

• Route: Route is the conditionally shown component that renders some UI when its path matches the current URL.

• Link: Link component is used to create links to different routes and implement navigation around the application. It works like HTML anchor tag.

The Project

In this project we made a fully functional navigation bar using a react router, below is what our project looks like:

Creating our React app

To set up our React app, open your terminal and run the following command below:

npx create-react-app my navbar

Navigation Bar HTML

Now that the React app has been created, go to your code editor and create an app.js, navbar.js, and index.js files on the src folder, this should be pretty easy to do.

Edit your Navbar.js to the image above, inside this navbar.js is where we are going to put all of our navigation code, we are going to want to have a nav element which I am going to give a class, so we have a nav class:

<nav className="nav"></nav>

Inside of the Navbar.js file we are still going to have a link that redirects us to our homepage, and we gave it a class so we can be able to style it specifically:

<a href="/" className="site-title">Site Name</a>

Navigation Bar CSS

Now when you run this in your terminal there are no styles attached to it in your browser, to design this your own style; Go to your src/index.js directory and import “./style.css”. Below is what your code ought to look like:

And then we go to our src directory and create a syles.css file where we are going to input all of our css styles just as seen below:

* {
    box-sizing: border-box;
}
body {
    margin: 0;
}
.container {
    margin: 1rem;
    text-align: center;
}
.nav {
    background-color: #333;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2rem;
    padding: 0 1rem;
}
.site-title {
    font-size: 2rem;
}
.nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    gap: 1rem;
}
.nav a {
    color: inherit;
    text-decoration: none;
    height: 100%;
    display: flex;
    align-items: center;
    padding: .25rem;
}
.nav li.active {
    background-color: #555;
}
.nav li:hover {
    background-color: #777;
}

We set some global styles, normalized our CSS, and even set it to our preference, it should be looking like the image below:

Creating our pages

Now that we have our navigation bar, we want to create some pages and these pages are going to have the text of home, pricing and about as seen in the image above, so there is going to be separate components that contains all of our code for that page. To create this, go to your src directory and create a folder called pages, inside of it you create the Home.js, Pricing.js and About.js files, edit your files to look like the image below:

All this is going to redo is return an h1 with a text HOME inside of it, really straightforward. Now we do same for our About and Pricing pages, after this we import the pages created, into our src/app.js directory, it should look like this:

Installing our React Router library

Using a react router to make our project more efficient, so the user can be redirected properly when clicking on pricing, home or about. Now you have to install the react router library, to get started, the first thing we need to do is to go to terminal and type the code below.

 npm i react-router-dom

The library being downloaded is specifically for the doms. It is going to download all the libraries that we need for react router, to confirm that it has been downloaded, go into your package.json file, you will see

react - router - dom : 6 . 3 . 0

being installed.

Routing with React Router

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 are using and then you need to define all your different routes. Go to your index page and import a browser router by using this code block below.

import {Browser Router} from "react-router-dom"

React router allows you to do routing for mobile applications and so on, but for us we are creating a web application in a browser so we are going to be doing a browser router. Now wrap your entire application inside the Browser Router, which looks like this image below, because our entire component is going to be using this one single router to manage all of our routing.

Now we need to define that router and all the different routes inside of it, to do that we go into our src/App.js file and import route, routes components, using this code block below:

import { Route, Routes } from "react-router-dom"

this two components allows us to define all of our routes and group them together.

Defining our Routes components

The image above shows where our routes components wraps all of our individual routes and this routes components essentially just says “Hey, here is a list of different routes, choose the one that fits best”, so we are going to define all of this routes as there own routes components, and each of them has a path and also an element and what it is rendering out.

Modifying the Rest of our Project

Inside of our Navbar.js file we are using normal anchor tags which we need to replace with a Link component that is from react router, to do that go to the top of your Navbar.js file and import the Link component from react router dom, use the code block below to do that:

import { Link } from "react-router-dom"

And also replace all anchor tags with a Link but what is really important is instead of using “href” we are replacing it with “to” and it is going to work exactly the same, we have a “usedMatch” hook and also a “usedResolvedPath”.
The “usedMatch” allows us to compare essentially the current path that we are on to what ever path we want. “usedResolvedPath” allows you to take a relative or absolute path, combines it with the current path you are on and gives you the actual full path that you will be accessing.
And then we determined if it is active by using the “useMatch” class and we pass an object and with the object we passed a path which is our pathname for our resolved path and then we passed an end of true, by saying “end:true” we are just saying that the entire path must match because with react router you can actually do a partial matching but in our case we want to make sure that the entire URL is exactly the same, we do not want to worry about partial matching.

Conclusion

In this article, we created a functional navigation bar using react router hooks and components and also learnt how to import a react router library.