NavLink react-router-dom components :hover not working

Question

The hover does not work on react router components. Image

Answer 1

JSX inline style attributes does not allow :hover . You need to put that in your stylesheet instead.

Answer 2

You can't and even shouldn't put pseudo-classes inline. Put css in class and then apply it by className like in example below:

JSX:

<NavLink to="/example" className="nav_link">Example</NavLink>

CSS

.nav {
  //other styles
  //...
  a.nav_link:hover {
  cursor: pointer;
  color: red; 
  }
}

Example

Answer 3

I prefer the CSS-in-JS method to set the class like so:

nav_link: {
  textDecoration: 'none',
  '&:hover': {
    textDecoration: 'none'
  }
}