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.
In ReactJS, there are three different kinds of links. These are NavLink
, Link
, and a
links, and they all serve different purposes.
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;
}
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
orLink
when you need links that are routing to pages that belong to your application. For external links,a
is preferrable.
a
: This is used for links outside your webpage.<a href="https://how.dev/answers">Visit Edpresso </a>
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!