React Router V6 activeStyle 问题答案

【问题标题】：React Router V6 activeStyle issuesReact Router V6 activeStyle 问题
【发布时间】：2022-06-18 17:46:03
【问题描述】：

所以我的问题是我已经阅读了文档，它说我的按钮应该是这样的：

<NavLink
                      style={({ isActive }) =>
                        isActive ? activeStyle : undefined
                      }
                      to="overview"
                      className="group flex items-center px-2 py-2 text-base font-medium rounded-md"
                    >
                      Overview
                    </NavLink>

我应该补充一点：

  let activeStyle = {
    textDecoration: "underline", 
  };

  let activeClassName = "underline";

但问题是我使用的是 Tailwind，我不知道如何更改“let activeStyle”。加不了

  let activeStyle = {
    textDecoration: "bg-gray-900 text-white", 
  };

  let activeClassName = "underline";

这是什么意思..有人可以帮忙吗？

【问题讨论】：

标签： react-router tailwind-css

【解决方案1】：

如果我没记错的话，我相信 Tailwind 可以使用 CSS 类。该逻辑应应用于className 属性。

例子：

<NavLink
  to="overview"
  className={({ isActive }) => 
    [
      "group flex items-center px-2 py-2 text-base font-medium rounded-md",
      isActive ? "bg-gray-900 text-white" : null,
    ]
      .filter(Boolean)
      .join(" ");
  }
>
  Overview
</NavLink>

【讨论】：

【解决方案2】：

Navlink 提供了 activeClassName 道具，您可以在其中放置类还要使用确切的关键字，这样当 url 匹配时它就会被激活

你的代码可以写成如下：

【讨论】：

activeClassName 是 react-router-dom@5 组件 API 属性。 V6 NavLink 组件没有 activeClassName 属性。见NavLink。
您似乎在有机会包含代码之前发布了答案。请edit您的答案包含代码。

【解决方案3】：

尝试这样做，应该可以。

<Navlink to="/overview" className={(navData)=> navData.isActive ? "bg-gray-900 text-white" : null }> <a className="group flex items-center px-2 py-2 text-base font-medium rounded-md">Overview</a></Navlink>

【讨论】：