React Router v4 <NavLink> vs <Link> benefits
JavascriptReactjsReact RouterReact Router-V4Javascript Problem Overview
Besides the ability to set an "activeClassName" and "activeStyle" on NavLink, is there any reason to use NavLink over Link when creating links to other routes on non-navigational elements (ie. not main nav in header or footer) on your site that don't need an active state/class?
Javascript Solutions
Solution 1 - Javascript
The official documentation is clear:
> <NavLink>
>
> A special version of the <Link> that will add styling attributes to the rendered element when it matches the current URL.
Thus, the answer is NO. There are no other reasons except the mentioned one.
Solution 2 - Javascript
When you need to use style or class attributes on active <Link>, then you can use <NavLink>
Let see the example:
Link
<Link to="/">Home</Link>
NavLink
<NavLink to="/" activeClassName="active">Home</NavLink>
Solution 3 - Javascript
Link Component
> It is used to create links which allow to navigate on different URLs > and When we click on any of that particular Link, it should load that page which is associated with that path without reloading the page. Example:
NavLink Component:
> If, we want to add some styles to the Link. So that when we click > on any particular link, it can be easily identified which Link is > active. For this react router provides NavLink instead of > Link. Now replace Link from Navlink and add properties activeStyle. The activeStyle properties mean when we click on the Link, it should be highlighted with different style so that we can > differentiate which link is currently active. Example:
Solution 4 - Javascript
Simply,
When you use <Link> there isn't any active class on selected element.
In contrast, with <NavLink> the selected element is highlighted because this element is added an active class.
Hope useful for you.
Solution 5 - Javascript
One difference as of v6.0.0-beta.3 is that activeClassName and activeStyle have been removed from NavLinkProps. Instead, you can pass a function to either style or className that will allow you to customize the inline styling or the class string based on the component's active state. you can also pass a function as children to customize the content of the