是否有必要将 'passHref' 传递给具有语义 UI React 作为其子组件的 NextJS <Link>？

Question

我一直在阅读 nextjs 文档，它在 here 中说：

If the child of Link is a function component, in addition to using passHref, you must wrap the component in React.forwardRef:

我是使用语义 UI React 的新手，所以我不确定是否需要这样做，更重要的是如何这样做。我很担心这一点，因为就在上面引用的行之前，文档说 here 那：

Without this (the passHref), the tag will not have the href attribute, which might hurt your site’s SEO.

我可以这样传递 passHref：

<Link href='/posts' passHref>
  <Button>See Posts</Button>
</Link>

但问题是我认为我们不能用 React.forwardRef 包装来自语义 UI 的组件，因为它刚刚导入。所以我的问题是：

这样就好了吗？
或者是否有解决方法可以“不伤害”我网站的 SEO？

Answer 1

你只需要一些标签的passHref，这里是an example。与 SEO 无关，您的报价是关于“如果您没有 passHref 属性但具有 child，您的 SEO 可能会被破坏”。

只需创建 2 个带 passHref 和不带 passHref 的页面，然后检查页面，例如，使用 chrome 的 LIghthouse 或任何其他工具。另外，检查 DOM，你会看到，SEO 没有直接变化。（ofc 如果 child 组件是 html 或者甚至没有“必需” href 属性的反应组件。）

Answer 2

是的。 nextJs 文档指出，如果您的 child 不仅仅是一个标签，而是一个功能组件或 class 组件，则需要 passHref。确保在将反应组件用作 child

时传递它

Answer 3

是的，在某些情况下您需要根据 Nextjs 文档执行以下操作：

function NavLink({ href, name }) {
  // Must add passHref to Link
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  )
}

是否有必要将 'passHref' 传递给具有语义 UI React 作为其子组件的 NextJS <Link>？

Is it necessary to pass 'passHref' to NextJS <Link> having a Semantic UI React as its child component?

reactjs

next.js

semantic-ui-react