React Router V6 activeStyle 问题

Question

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

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

这是预期的..任何人都可以帮忙吗？

Answer 1

如果我没记错的话，我相信 Tailwind 可以与 CSS 类一起使用。该逻辑应应用于 className prop.

示例：

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

Answer 2

Navlink 提供了 activeClassName 道具，您可以在其中放置类还使用 exact 关键字，以便在 url 匹配

时激活它

你的代码可以这样写：

React Router V6 activeStyle 问题

React Router V6 activeStyle issues

react-router

tailwind-css