React-Router NavLink 活动颜色答案

【问题标题】：React-Router NavLink active colorReact-Router NavLink 活动颜色
【发布时间】：2021-03-07 13:55:47
【问题描述】：

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

图片便于理解

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;
                }
            }
        }
    }

我做错了什么？

【问题讨论】：

标签： css reactjs react-router-dom

【解决方案1】：

在 react-router-dom v6 中，您还可以将 end 语句用于您的“/”路由。在 react-router-dom v6 中，您还可以使用 activeStyle={{color: yourcolor}} 作为 NavLink 的道具。我无法使上述解决方案在实际的 v6 上运行。

【讨论】：

【解决方案2】：

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

您需要将exact 添加到您的NavLinks

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

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

【讨论】：

谢谢！我想这一定是这种小错误。
请记住，通过将exact 添加到您的NavLink 会发生另一个结果，如果没有exact，路由器将呈现所有匹配的页面（甚至是部分匹配），因此您的主页将即使您导航到任何其他页面也已显示，但是在添加 exact 后，它只会呈现完全匹配的内容。