DEV Community

Cover image for Implementing React Routes (Part -2) Link Vs NavLink
Yunwen Eric
Yunwen Eric

Posted on

19 1

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

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.

Next: React Route with Params

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (6)

Collapse
 
wadigzon profile image
WADIGZON DIAZ-WONG

excellent, thanks for sharing!

Collapse
 
ridhoanshory profile image
Muhammad Ridho Anshory

Great Insight Eric! superb

Collapse
 
yunweneric profile image
Yunwen Eric

Hi @#Muhammad Ridho Anshory

I'm sure some stuffs here will be broken given the new React Routing.
Please notify me if you had any issue

Collapse
 
brandondamue profile image
Brandon Damue

Great post Mr Eric

Collapse
 
yunweneric profile image
Yunwen Eric

Thanks Brandon . Hope you liked it

Collapse
 
nadim_ch0wdhury profile image
Nadim Chowdhury

good job

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay