时间戳

首页 > 解决方案 > React-Router NavLink 活动颜色

css - React-Router NavLink 活动颜色

问题描述

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

图片便于理解

在此处输入图像描述

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>

css

    .menu ul{
        list-style: none;
        padding-left: 0;

        li{
            display: inline-block;
            margin: 0 1.5em;
            color: black;
            font-weight: 400;

            a{
                color: black;
                text-decoration: none;

                &.active{
                    color:$mainColor;
                }
            }
        }
    }

我究竟做错了什么？

标签： cssreactjsreact-router-dom

解决方案

原因是即使您导航到新链接，第一个链接/仍然评估为真。

您需要添加exact到您NavLink的 s

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

这将确保仅当路由与to链接完全匹配时才添加活动类

推荐阅读