NextJS <Link>组件嵌套Semantic UI React子组件时是否需传递passHref？相关SEO问题及解决方案问询

结论先行：你的当前写法完全可行！ #

Semantic UI React 库中的绝大多数交互组件（包括你用的 Button）已经内置了 React.forwardRef 的处理，所以你完全不需要手动再去包裹它们。这意味着你现在的写法：

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

完全符合Next.js的要求，既不会缺失href属性，也能保证网站的SEO表现。

为什么不需要手动用forwardRef？ #

Semantic UI React 官方在设计组件时，已经考虑到了和React路由类库（包括Next.js的Link）的兼容性。比如它的Button组件内部已经通过forwardRef把ref传递给了底层的<a>或<button>元素，当你通过passHref让Next.js把href传递给子组件时，组件能正确接收并渲染到对应的DOM元素上，不会出现缺失href的情况。

如何验证是否生效？ #

你可以在浏览器开发者工具里检查最终渲染的DOM：

• 找到这个Button对应的HTML元素，应该能看到它带有href="/posts"属性
• 只要能看到这个属性，就说明passHref已经生效，SEO不会受到影响

万一遇到未处理forwardRef的第三方组件怎么办？ #

如果以后你用到某个Semantic UI组件（或者其他第三方组件）没有处理forwardRef，你可以自己做一层简单的包裹：

const ForwardWrappedComponent = React.forwardRef((props, ref) => {
  return <ThirdPartyComponent ref={ref} {...props} />;
});

// 然后在Link中使用
<Link href='/path' passHref>
  <ForwardWrappedComponent>Click Me</ForwardWrappedComponent>
</Link>

不过对于Semantic UI React的核心组件来说，这种情况几乎不会出现。

关于SEO的补充说明 #

Next.js文档提到的“缺失href损害SEO”，本质是因为搜索引擎爬虫依赖<a>标签的href属性来抓取页面内容。只要你的最终DOM中的可点击元素带有正确的href，就不会有问题。你的当前写法完全满足这个要求，所以不用过度担忧。

内容的提问来源于stack exchange，提问作者Zeddrix Fabian