NextJS 中的 <Link> 组件似乎失去了 cursor-pointer 和 <div> 作为 child 组件

Question

我正在使用 NextJS 并希望配置顶部导航栏 header。在我的导航栏的 left-hand 一侧，我有一个小的 svg 和文本，我希望它们成为 Link 到网站根目录的内容。 Link组件不允许多个children，所以我这样做了：

<Link href="/">
  <div className="">
    <img className="" src="/whistle.svg" />
    <span className="">Root!</span>
  </div>
</Link>

然而，当我这样做时，整个 div 块都丢失了它 cursor-pointer，然后我需要设置一个特定的 class 光标指针。我也在使用 tailwindCSS。我不确定在这种情况下我做错了什么 - 感谢您的帮助！

Answer 1

<Link> must have <a> 标签里面。您自己定义样式，因此只需将 style 的光标指针 class 添加到您的 div。您可以将 className="cursor-pointer" 添加到您的 div 而不是描述的样式。

<Link href="/">
  <a>
  <div className="" style={{cursor: 'pointer'}}>
    <a>
    <img className="" src="/whistle.svg" />
    <span className="">Root!</span>
    </a>
  </div>
  </a>
</Link>

NextJS 中的 <Link> 组件似乎失去了 cursor-pointer 和 <div> 作为 child 组件

<Link> component in NextJS seems to lose the cursor-pointer with a <div> as child component

css

next.js

tailwind-css