NextJS React Tailwind CSS 导航栏主动样式

Question

自从我摆弄 React 并刚刚开始学习 Next.Js 以来已经有一段时间了。 我很好奇如何根据当前 boolean 值“当前”true/false 更改 Tailwind CSS 中导航栏的背景，用户使用 Next Router 在哪个页面上。

看起来很简单，但我理解起来有点复杂。 该代码最初来自 Tailwind CSS 示例之一，并且有一个带有 href 的链接数组和带有 true/false 的当前值，当设置为 true 时填充背景。 当您更改任何“真实”时，我想要的背景渐变会出现，但我一直试图让它在访问的相应页面链接上更新。

如果有人能指导我正确的方向，我将不胜感激。

这是我的 header 代码：

/components/header.js

我还制作了一个布局组件组件并将其包装在我的 _app.js 中。

这是其他组件的代码 rest：

_app.js

/components/layout/main.js

我的导航栏目前看起来像这样：导航栏图片

如果您需要我的其他代码，我很乐意提供。

Answer 1

您可以使用router.asPath根据当前的 url 计算每次渲染，而不是将当前存储在导航数组中（请参阅此处的文档）。

const isActive = router.asPath === item.href;

--

{
  navigation.map((item) => {
    const isActive = router.asPath === item.href;
    return (
      <NextLink key={item.name} href={item.href} passHref>
        <a
          className={classNames(
            isActive
              ? "text-black font-bold bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400"
              : "text-gray-700 hover:bg-gray-200 hover:text-gray-500 hover:underline hover:underline-offset-2",
            "px-3 py-2 rounded-md text-sm font-medium font-mono"
          )}
        >
          {item.name}
        </a>
      </NextLink>
    );
  });
}