NextJS 中的 <Link> 组件似乎丢失了以 <div> 作为子组件的光标指针

Question

我正在使用 NextJS 并想配置顶部导航标题栏。在导航栏的左侧，我有一个小的 svg 和文本，我希望将其链接到网站的根目录。Link 组件不允许有多个子组件，所以我这样做了：

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

但是，当我这样做时，整个 div 块都会丢失光标指针，然后我需要设置特定类别的光标指针。我也在使用 tailwindCSS。我不确定在这种情况下我做错了什么 - 感谢任何帮助！

Answer 1

<Link> <a>里面一定有标签。您可以自己定义样式，因此只需将光标指针添加class到style您的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>

PS 2023+ 和 Nextjs v13+ 的更新：<Link> 不需要 <a>标签。