Learning Redux

Marking the currently selected link

React-router offers a special version of the <Link> component. It is called <NavLink> and adds styling attributes to the link.

By default, the currently active link is given the active class. The activeClassName property can be used to change that behavior.

Furthermore, the activeStyle property can be used to define a style object for active links. This is what we are going to use in this section:

1. Edit src/components/Navigation.jsx and change the import from Link to NavLink:

import { NavLink } from 'react-router-dom'

2. Now, we define a style object for active links:

const activeLink = {  textDecoration: 'none',  color: 'black'}

3. Then, replace all <Link> components with <NavLink> and pass the previously ...