NextJS React Tailwind CSS Navbar 活动样式

Question

我已经有一段时间没有使用 React 并刚刚开始学习 Next.Js。我很好奇如何根据用户在 Next Router 所在页面上的当前布尔值“current”true/false 在 Tailwind CSS 中更改 Navbar 的背景。

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

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

这是我的标题代码：

/components/header.js

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

这是其他组件的其余代码：

_app.js

/components/layout/main.js

我的导航栏目前看起来像这样： Navbar Image

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

Answer 1

除了将 current 存储在 navigation 数组中，您还可以使用 router.asPath 根据当前 url 计算每次渲染（请参阅文档 here）。

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