NextJS React Tailwind CSS Navbar 活动样式

Posted 2023-03-07

【中文标题】NextJS React Tailwind CSS Navbar 活动样式

【英文标题】：NextJS React Tailwind CSS Navbar Active Styling

【发布时间】：2022-01-17 09:58:29

【问题描述】：

我已经有一段时间没有使用 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

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

【问题讨论】：

虽然提供外部链接很好，但您的问题应该是独立的，最好不要依赖外部资源来回答。请将相关代码作为代码 sn-ps 添加到问题中。

【参考方案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>
    );
  );

【讨论】：

您好，感谢您的回复！当我尝试在 navigation.map 下导入 const 时，它说 JSX 表达式必须有一个父元素。我在函数的顶层导入了 useRouter() 。我也尝试在所有函数之上使用“const isActive”，并且未定义获取路由器。我应该怎么做？我也试过把它放在“useRouter()”下面，get item is not defined。

其实，谢谢！我让它工作。我意识到我错过了将其更改为带有 括号的正确箭头函数并正确关闭它。 :))