React Router v5 with a Project

Photo by Jeff Sheldon on Unsplash

We will now learn about React Router by implementing it in the project, we had created earlier. We will create it over the code of the earlier part and you can find it here.

Now, we are learning to create routes using react router v5, but recently v6 came out and it have got massive changes. We will look into v6 in a separate post.

We will start where we left and will add react router v5 in the earlier project by the below command.

npm i react-router-dom@5
npm install

Now, to add Router in our project we need to import BrowserRouter, Switch and Route first from react-router-dom in App.js first. After that inside our return statement, we are wrapping everything with Router and then wrapping the two components of ContactList and AddContact with Switch. We are keeping the Header component outside it, since we want to show it always.

In the Route we are showing the components. Notice the / for ContactList component also contain the word exact, which is required.

App.js

Now, also need to do some changes in the ContactList.js file temporarily because we are not passing any props now to it. So, we are creating a temporary contacts array and looping through it. Also, adding some additional divs to it.

ContactList.js

Now, if we go to the http://localhost:3000/add we will see the AddContact component.

AddContact

And if we go to http://localhost:3000/ we will see the ContactList component.

ContactList

We are going to the routes manually, so we will add a button Add Contact in the ContactList.js file, wrapped in a Link tag, which will take us to the route.

ContactList.js

Now, we will have this button on localhost and clicking on it will take us to the about page.

Contact list

Now, as per our earlier code we have props also been passed in our components. So, to do that we will use arrow function in App.js inside Route to pass the props.

App.js

Back in our ContactList.js file, we will remove the hard-coded contacts array and also add the props back.

ContactList.js

Now, we are able to add Contacts easily but we need to navigate back to http://localhost:3000/ each time after adding a contact in http://localhost:3000/add. So, we will add route programmatically in AddContact.js file

AddContact.js

But, we also need to pass these additional props in from our App.js file.

App.js

Now, our adding functionality is working correctly in localhost.

localhost

Next, we will implement the logic of clicking on a particular contact and getting to the detail page of that contact. So, we will add a Link to the ContactCard.js file which will take us to the /contact/id for every id.

ContactCard.js

Now, clicking on any contact will take us to the /contact/id with a different id for each contact.

Contact

Next, create ContactDetail.js file in the components folder. Here, we are showing image from the randomuser api and for now static name and email.

We also have a button to go back to the home page.

ContactDetail.js

Next, we will add the Route for ContactDetail in App.js file. Here, we are also using the wild character and adding the id.

App.js

Now, clicking on any contact will take us to the details, which is now showing same static data for all.

Contact

Now, we will show the data for each user. For this we are first declaring a local user state variable in ContactDetail.js file. After that we are using useParams to get the id out of the url.

After that we are using useEffect to get all the data from localStorage and then finding our user by using the find method.

We have also created a randomNumber generator to get random images of men from our API.

ContactDetail.js

Now, our app is working fine and showing the correct data. You can find the code for the same in this github repo.

Correct data

You can find this article in video format on my YouTube channel.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Module Resolution or Import Alias: The Final Guide

DIY Music Player with React js 📻

How the TypeScript Omit Type works

How we can control javascript functions — Generator

How to trigger an event on scroll with pure REACT (without any package).

This.JavaScript: State of Frameworks- Vue Update

(MERN-10–11) Setup MongoDB Locally

Creating Overlays in ReactJS

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Implement email authentication with React + RESTful API

Writing A Custom Rest API Hook

State Management and React

Getting Started with React