Next.js Link含#的URL无法路由至子页面问题排查

• 异常表现：当当前页面URL包含锚点（例如localhost:3000/some-id#header）时，点击Next.js的Link组件跳转子页面（目标地址为localhost:3000/some-id/subpage），第一次点击只会清除URL中的锚点，不会执行跳转操作；第二次点击时，因为URL已无锚点，跳转可正常完成。

• 路由与Link配置：项目使用动态路由[page]/[subpage]，Link组件的配置代码如下：

<Link
  href={link} // 此处link值为/some-id/subpage
  scroll={false}
  shallow={true}
>

• 无效尝试：开启legacyBehaviour并手动嵌套<a>标签后，跳转后的URL会保留原锚点（变为/some-id/subpage#header），不符合需求。

• 临时解决办法：移除Link组件上绑定的自定义onClick事件（该事件未阻止默认行为），问题即可解决。

• 推测原因：该异常疑似为Next.js 13.0版本的bug。

内容的提问来源于stack exchange，提问作者Jonas Praem