Fatal编程技术网
  • css/
  • Css 反应路由器NavLink活动颜色

Css 反应路由器NavLink活动颜色

css reactjs

Css 反应路由器NavLink活动颜色,css,reactjs,react-router-dom,Css,Reactjs,React Router Dom,嘿，伙计们，我真的不明白为什么会这样。当我启动应用程序时，一切正常。菜单中的第一项具有活动类。但当我点击菜单中的另一个项目时，这个项目也会收到这个类的活动，而上一个类的活动并没有被删除 图片以便于更好地理解 HTML <div className="menu"> <ul> <li><NavLink to="/" activeClassName="active">Dom

嘿，伙计们，我真的不明白为什么会这样。当我启动应用程序时，一切正常。菜单中的第一项具有活动类。但当我点击菜单中的另一个项目时，这个项目也会收到这个类的活动，而上一个类的活动并没有被删除

图片以便于更好地理解

HTML

<div className="menu">
    <ul>
      <li><NavLink to="/" activeClassName="active">Domov</NavLink></li>
      <li><NavLink to="/about" activeClassName="active">O nás</NavLink></li>
      <li><NavLink to="/portfolio" activeClassName="active">Portfólio</NavLink></li>
      <li><NavLink to="/contact" activeClassName="active">Kontakt</NavLink></li>
    </ul>
</div>
我做错了什么？

原因是，即使您导航到一个新链接，第一个链接的计算结果仍然为true

您需要将
exact
添加到
NavLink
s中

<NavLink exact to="/portfolio" activeClassName="active">Portfólio</NavLink>

Portfólio
这将确保只有当路线与
至
链接完全匹配时，才添加活动类
谢谢！我认为这一定是一个小错误。请记住，如果将
exact
添加到您的
NavLink
，如果没有
exact
，路由器将呈现所有匹配的页面（甚至部分匹配），那么即使您导航到任何其他页面，也会显示您的主页，但是，在添加
exact
之后，它将只呈现完全匹配的内容。

<NavLink exact to="/portfolio" activeClassName="active">Portfólio</NavLink>