What are the differences between NavLink, Link, and "a" in React?

What are links?

Links are also known as hyperlinks. They are references to data that the user can follow by clicking or tapping. They can be used to view resources on the web. Resources can be web pages, images, videos, etc. When links are clicked, they take you to the resource you requested.

Types of links in React applications

In ReactJS, there are three different kinds of links. These are NavLink, Link, and a links, and they all serve different purposes.

1. NavLink: This is used when you want to highlight the current or active link. This is used with the activeClassName attribute, which enables it. See the example below.

<NavLink to="/home" activeClassName="active" >Home</NavLink><br/>

The CSS can then be styled according to your choice inside the App.css file. Let’s make the text color red to make it simple.

.active{
  color:red;
}

2. Link: This is used when there is no special style or highlighting of your link. See the example below.

<Link to="/not-active">Not Active </Link><br/>

Note: Use the NavLink or Link when you need links that are routing to pages that belong to your application. For external links, a is preferrable.

3. The anchor tag a: This is used for links outside your webpage.
   See the example below.

<a href="https://www.educative.io/answers">Visit Edpresso </a>

Conclusion

The NavLink is used when you want to highlight a link as active. So, on every routing to a page, the link is highlighted according to the activeClassName. Link is for links that need no highlighting. And a is for external links.

Thanks for reading!