nextjs:链接元素导致水合错误

我正在调查我页面上的许多水合错误,这些错误似乎来自我去年从旧的下一个版本迁移到最新的15.x版本。请参阅底部的截图:

Unhandled Runtime Error Expected server HTML to contain a matching <div> in <a>.

和

Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

我从这些错误中了解到:客户端当前的html与我们在客户端预先计算的不匹配。

这很奇怪,因为我在组件中使用了“use client”语句。

我可以把所有这些都钉到一个按钮组件中,该组件使用 next/link 组件。因此,我尽可能地简化了它,但无论我如何编辑这个组件,它都会在控制台中抛出水合错误。我尝试了各种无容器元素的方法,等等:

'use client'
import React from 'react'
import Link from 'next/link'

const ButtonComponent = function () {
  return (
     <button>
      <Link href="/">Button</Link>
    </button>)
}
export default ButtonComponent

然而,一旦我摆脱了 下一页/链接 在这种情况下,所有水合误差都得到了解决

'use client'
import React from 'react'

const ButtonComponent = function () {
  return (
     <button>
      Button
    </button>)
}
export default ButtonComponent

这不是我想要的-这应该是一个可重用的按钮,可以获取子项和href作为道具并呈现子项。

我该如何解决这个问题?我有误解吗?

[ ]