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

8hhllhi2 于 2023-02-04 发布在其他

关注(0)|答案(2)|浏览(201)

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

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

然而，当我这样做时，整个div块丢失了它的指针，我需要设置一个特定的指针类。我也使用了tailwindCSS。我不确定我在这个例子中做错了什么-任何帮助都是感激的！

next.js

来源：https://stackoverflow.com/questions/71678967/link-component-in-nextjs-seems-to-lose-the-cursor-pointer-with-a-div-as-chil

2条答案

按热度按时间

jaql4c8m1#

<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>

赞(0）回复(0）举报 2023-02-04

q8l4jmvw2#

next/link不再需要手动添加为子项：
https://nextjs.org/blog/next-13#nextlink

import Link from 'next/link'

// Before
// Next.js 12: `<a>` has to be nested otherwise it's excluded
<Link href="/about">
  <a>About</a>
</Link>

// Next.js 13: `<Link>` always renders `<a>`
<Link href="/about">
  About
</Link>

赞(0）回复(0）举报 2023-02-04

我来回答

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

2条答案

相关问题

热门标签

最新问答