React Router v4 vs benefits

Question

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?

I can't comment directly to TOUMI (because I don't have 50rep), so I'll add it here. `NavLink` keeps the proper focus on the page for accessibility. When using link, initial focus is lost on page load and you will also notice that tabbing through dropdowns also breaks when using `Link`. NavLink fixes this. — DJNorris, Jul 11 '19 at 20:08

score 157 · Accepted Answer · edited Jun 20 '20 at 09:12

157

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 16 '17 at 20:06

Abdennour TOUMI

64,884
28
201
207

sultan aslam · Answer 2 · 2018-09-03T09:58:36.023

50

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>

edited Sep 03 '18 at 09:58

answered Mar 19 '18 at 18:17

sultan aslam

2,785
1
27
36

score 9 · Answer 3 · answered Nov 30 '19 at 17:21

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:

Ref: https://www.javatpoint.com/react-router

Neo_ · Answer 4 · 2019-08-02T09:23:36.633

6

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.

edited Aug 02 '19 at 09:23

answered Jul 24 '19 at 09:58

Neo_

79
1
3

Some code sample will help the users. [From review](https://stackoverflow.com/review/low-quality-posts/23612520) – Vaibhav Vishal Jul 24 '19 at 10:56

React Router v4 vs benefits

4 Answers4

Linked