JavaScript by Example

Seamless navigation with NavLink

React Router has a perfect solution to fix the reloading problem during navigation. React Router provides Link and NavLink components, which you should use instead of the traditional anchor tags. NavLink has more features than the link component, such as specifying an active class name when the link is active. Therefore, we will use NavLink in our application.

For example, consider the following anchor tag we have used in the App.js file for navigating to the authors page:

<a className="nav-link" href="authors">Authors</a>

We can replace this with React Router's NavLink component as follows:

 <NavLink className={'nav-link'} activeClassName={'active'} to={routes.authors}>Authors</NavLink>

Here's what the attributes ...