Day 24 and 25. Another two days full of ReactJS. In my opinion, the 100 days initiative can be one of the best ways to learn if you remain honest with it. And since, I am trying to stay upright; I am learning something new, every single day. 🥂

When I first started learning React Router Dom package, I wasn’t a big fan of it. You see folks! When we don’t like something, we deflect it. We procrastinate. And to be honest, I was also doing the same this past week. But then I took another dive in this NPM package yesterday. And I must say that it wasn’t so difficult.

So on my day 24 and 25 of React, I completed this React Router Dom section of Mastering React course. And then I implemented what I learned on my Vidly application. Those of you who don’t know what Vidly is, it’s a movie application that I am building. 🏗

🧭 Day 24 and 25 – Adding Navigation

If you have seen my Vidly app in my earlier blogs, you would know that it doesn’t have a navigation bar. Because a week ago, I was not familiar with how to render a new component when a URL changes. And as I now know, I added a navigation bar in Vidly.

Vidly app with nav - msaaddev

You can see in the above GIF that when I am clicking on any of the navigation bar options, URL changes. As the URL changes, the respective component is rendered accordingly. I will now explain everything step by step of what I did to make this possible. 👨‍🏫

👨‍💻 Building Customers, rentals, and Not found

The very first thing which I did for creating a perfect navigation bar was to create the components that will render as the URL changes. Building a component is simple. Just create a new file with JSX extension and add a class or a stateless functional component in it, according to your need.

I created the same JSX files like this one but with a changed component name — Rentals, NotFound.

📦 Adding Route and redirect

The next thing I did was to introduce routes in my App.js file of Vidly. The purpose of these routes was to render the components as soon as the URL changes. If you are interested in reading a more detailed description of Routes, click here.

I also added two redirects. The first Redirect redirects the users to the NotFound component if they enter a wrong URL. The other one redirects them to /movies even when they click on the homepage button.

⚡ NavBar component

After adding routes, I created the NavBar component. For this, I implemented a stateless functional component and used Bootstrap navigation to save time. Then I imported another new component in this NavBar component.

import { NavLink } from "react-router-dom";

🚀Using NavLink, I encoded links on which a particular component renders.

Before I forgot, I should mention that there is not a big difference between the Link and NavLink component. The only difference, which I know of, is that the NavLink highlights the link which is active at the moment.

👓 adding NavBar component in App.js

The last thing was to add this NavBar component, which I just created in the App.js file. For this, I imported this component at the top of the page and then used it as an HTML tag in my code.

If you carefully read the code, you’ll notice that I am using  <React.Fragment> component. It’s because I need to wrap the main and NavBar in a single tag. And for this, I am using this component that React offers.

This is it for today folks. I did some other changes too but didn’t discuss them here. I’ll write again. Till then, cheerios. 🤞