如何使用NEXTUI导航条在地图循环中的活动链接上设置isActive？

Question

我正在使用新的NEXTUI导航栏：https://nextui.org/docs/components/navbar

我想在活动链接上设置isActive属性，并且没有多少来自谷歌的帮助，所以我希望这里有人使用过它，或者知道如何使用它。我用的是Next.js

守则的一部分：

<Navbar.Content
  enableCursorHighlight
  activeColor="primary"
  hideIn="xs"
  variant="highlight-rounded"
>

  {navigation.map((item, index) => (
    <Navbar.Link key={index} href={item.link}>
      {item.title}
    </Navbar.Link>
  ))}

</Navbar.Content>

编辑:当我在isActive循环中添加map时，它会产生所有的效果。我希望在单击的(活动链接)上一次设置isActive。如果我没有循环我的导航链接(它来自后端)，我可以在其中一个上设置IsActive属性，但是即使我单击其他链接，也可以设置有isActive的那个属性。

Answer 1

您必须使用map中的特定条件来检查您是否在正确的路线上。

例如:您可以使用next/router并将其与项的link属性进行比较。

 const { asPath } = useRouter();
.
.
.
//inside return body 
....
 {navigation.map((item, index) => {
    if(asPath === item.link)
   return(<Navbar.Link isActive key={index} href={item.link}>
      {item.title}
    </Navbar.Link>);
  });
  else
 return(<Navbar.Lin key={index} href=. {item.link}>
      {item.title}
    </Navbar.Link>);
  })
}