使用URL对象的Next.js Link在路径含元素ID时失效问题

当使用Next.js的Link组件并通过URL对象配置链接时，锚点（#contact这类片段标识符）不能放在pathname中，需要单独通过hash属性指定。

错误写法 #

<Link href={{ pathname: "/#contact", query: query }}>
  联系我们
</Link>

正确写法 #

把锚点部分从pathname中剥离，用hash字段单独设置：

<Link href={{ pathname: "/", query: query, hash: "#contact" }}>
  联系我们
</Link>

原理说明 #

Next.js的URL对象结构中，pathname仅用于指定路径部分，而hash是专门用于设置锚点的独立属性。如果把锚点拼在pathname里，Next.js会把整个/#contact当作路径解析，导致锚点无法正确识别进而失效。直接写字符串href='/#contact'时，Next.js会自动解析出路径和锚点，所以能正常工作。

内容的提问来源于stack exchange，提问作者Michael Vanhout