<Link> 在 next.js 的 <Button> 中不起作用答案

【问题标题】：<Link> not working in <Button> for next.js<Link> 在 next.js 的 <Button> 中不起作用
【发布时间】：2021-06-06 06:45:56
【问题描述】：

尝试对我在导航栏中创建的 a 进行环绕，如下所示：

  <NavBtn>
    <Link href="/contact" passHref>
      <Button>
        Contact Me
      </Button>
    </Link>
  </NavBtn>

这是我的自定义 Button.js

const StyledButton = styled.button`
  height: 45px;
  width: 130px;
  background: #908db9;
  border: none;
  border-radius: 4px;
  outline: none;
  color: #fafafa;
  font-size: 1.05rem;
  font-weight: 500;
  
  &:hover {
    background: #b8b4f0;
  }
`

const Button = ({ children }) => {
    return  <StyledButton><a onClick={() => console.log("clicked")}>{children}</a></StyledButton>
}

基本上，我无法像正常行为那样单击按钮。但我无法解决问题的出处:(

请指教，因为我对自己做错了什么有点迷茫。如果需要更多信息，请告诉我！提前致谢。

【问题讨论】：

链接中的按钮？
刚刚交换了链接和按钮哈哈，不敢相信我还没有尝试过。你是如何做到的，当你将鼠标悬停在按钮上时，它会像可点击一样响应？目前仅在我将鼠标悬停在文本上时才会发生
你需要在链接中写onClick吗？
这两种方法对我来说似乎都无效。您要么有一个按钮，要么有一个链接。我不明白你想达到什么目的？
没错，现在的作品只是失去了我的风格，但这不是问题。谢谢T先生

标签： javascript css reactjs next.js styled-components

【解决方案1】：

只需包裹在 Extra Div 中即可解决问题。在哪里使用按钮组件

【讨论】：

感谢您在 Stack Overlfow 上的回答。为了改进您的答案，请添加您建议的解决方案如何工作的示例代码。
这不是一个好的解决方案，因为用 div 包装会削减一些可访问性功能。