<navlink>的activeStyle不起作用

Question

我使用tag来创建导航菜单，但activeStyle属性不会改变所选链接的背景颜色：

我尝试从React和Redux一书中实现示例，第289页

const selectedStyle = {
backgroundColor: "white",
color: "slategray"
}

    export const MainMenu = () =>
<nav className="main-menu">
  <NavLink to="/">
  <HomeIcon/>
</NavLink>
  <NavLink to="about" activeStyle={selectedStyle}>
  [About]
</NavLink>
  <NavLink to="events" activeStyle={selectedStyle}>
  [Events]
</NavLink>
<NavLink to="products" activeStyle={selectedStyle}>
  [Products]
</NavLink>
<NavLink to="contact" activeStyle={selectedStyle}>
  [Contact Us]
</NavLink>
</nav>

来自“react-router-dom”

Answer 1

  仅当位置完全匹配

时才会应用

活动类/样式

将exact属性设置为每个NavLink。

您已定义/路由，该路由已成功映射到每个NavLink路径路径。因此，没有确切的路由匹配。没有应用activeStyle。

 <NavLink to="/" exact>
  <HomeIcon/>
</NavLink>
  <NavLink to="/about" exact activeStyle={selectedStyle}>
  [About]
</NavLink>
  <NavLink to="/events" exact activeStyle={selectedStyle}>
  [Events]
</NavLink>