Add an active className to the link using React Router

Active class is required if you want to highlight the page name in the header on the current page. There are two ways we can use to add active className to the link. In this tutorial, I’ll show you all the different ways you can use to do that. So let us get started.

We will first set up our project with react js and react-router-dom. If you don’t know how to do that please read my previous tutorial on How to use React Router in your React js project.

1. Create your react project yarn create react-app and install react-router-dom yarn add react-router-dom into the project.
2. Now follow the below diagram to create our project files and folder structure.

3. We will create some basic routes for our homepage, about, and service page. So open your project index.js file and remove all codes and then paste the below code into it.

4. Now we will create some links in our Header.js file for navigation using Link from react-router. Paste the below code in the Header.js file

Note: don’t forget to add dummy text in the about.js file and service.js file or else you will get an error on running the app.

5. It’s time to add some basic CSS for links. Paste the below code in the Header.css file.

Ok, so we have basically set up our react-router basic project. Now we will use methods to add active className one by one.

1. NavLink instead of Link

The first method is to use the react-router-dom inbuilt method of NavLink instead of Link. The NavLink supports activeClassName which can help us assign active className to the link.

Paste the below-updated code in your project Header.js file.

Note: we have to add exact props to the nav link with the home route else it will keep the route of the homepage always active.

Run your project and refresh the browser to view the changes.

2. useLocation Hook

React router has a hook which can be very useful to know the current route. The above method of using NavLink is not always useful to create an active className. The NavLink only renders a tag with an active class in DOM. But what if your design contains an active class in li tag or you are using a third-party module for creating a menu like we have used in our previous tutorial Create a Sidebar Menu in React js. Here how the useLocation hook from react-router-dom comes to the rescue. Let us see how to use that, paste the below code in your Header.js file

The above code will help you adding active className to any HTML tag. I have used this to add in li tag but you can add it anywhere.

You also need to add the below CSS code in your header.css file.

.active a{
   background-color: red;
   color: #fff;
}

Now refresh the browser to see changes

For any query, you can get in touch with me via LinkedIn

That’s it for today. Below I Have shared Live code and GitHub repository for reference.

Mediumtutorial/react-router-activelink