NavLink react-router-dom 组件：悬停不起作用

Question

悬停对反应路由器组件不起作用。 图片

Answer 1

JSX 内联样式属性不允许:hover 。 你需要把它放在你的样式表中。

Answer 2

你不能，甚至不应该把伪类内联。 将 css 放在 class 中，然后按className应用它，如下例所示：

JSX：

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

CSS

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

例子

Answer 3

我更喜欢 CSS-in-JS 方法来设置类，如下所示：

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