Implementing React Routes (Part -2) Link Vs NavLink

Recap:

Hello guys In our previous tutorial, we learned how to add simple routes to our react app. Today will be a short tutor on when to use NavLink and Link tags in React and we shall concentrate on the Nav component created in the last tutorial. Link

Overview

Before getting started, it is important to know that react uses the JSX(JavaScript XML) syntax which allows you to write JavaScript in HTML in a nice and easy way. For more details about JSX, Click here

What is NavLink and Link in React?

The react router dom parckage we installed in the previous tutorial gives your access to using either the NavLink or the Link which we can use as tags, This is actually is the representation of the 'href' attribute of the anchor tag or the 'window.location.href' object.

What is the difference between NavLink and Link?

Well actually, the main difference between these two's is a class attribute. When we use the NavLink as a tag, it automatically inherit an active class when clicked. On the other hand, the Link tag does now have an active class when clicked.

When should I use the NavLink?

Just as the name implies 'NavLink', we use it mostly on navigation bars. This is because the active class permits us to define our custom styling in the App.css stylesheet. As such, we can use it to style our active buttons which in notify the use on which page he/she is currently on.

When should I use the Link?

The Link tag can be used where we want to do just some routing with no special effect. For instance; we can use the Link tag for scroll-to-top button, add to card buttons, submit button and more.

Here is our nav component.

import '../App.css';
import {NavLink} from 'react-router-dom';

let Nav =()=>{
    return (
     <div>
         <nav>
             <div className ='logo'>
                 <p>Logo</p>
             </div>
             <div>
               <ul>
                <li><NavLink to = '/home'>Home</NavLink></li>
                <li><NavLink to = '/about'>About</NavLink></li>
                <li><NavLink to = '/contact'>Contact</NavLink></li>
              </ul>
             </div>
         </nav>
     </div>
 )
}

export default Nav

Now let's go to our app.css stylesheet and add some styles

a{
  text-decoration: none;
  color: #0e151d;
  padding: 10px 20px;
  border-radius: 5px;
  background: #fff;
  transition: all ease-in-out 0.2s;

}
nav a:hover{
  background: rgb(166, 175, 255);
  transition: all ease-in-out 0.2s;
}

Finally, let's add some styles to the active class

 nav .active{
  background: #5855F3;
  padding: 10px 20px;
  border-radius: 5px;
  color: #fff;
}

Illustration:

Here is an illutration of how it works

Alt Text

Repo: Link to part 2.

Please do well to star my repo if you like this post. Until then, keep learning, keep coding and keep innovating.

yunweneric