使用NextJS <Link>组件移动端需双击跳转的问题求助

针对Pages Router（Next.js 12及以下） #

你当前错误地将target="_blank"、rel="noopener noreferrer"放在了<Link>组件上，而Pages Router的<Link>本身不支持这些属性，需将这些属性移到内部包裹的<a>标签中，同时保留passHref：

<Link href="/methodology" passHref>
  <a
    target="_blank"
    rel="noopener noreferrer"
    className="w-auto text-right text-sm text-riskfactor-400 underline underline-offset-2 hover:text-riskfactor-300 md:w-[345px]"
    onClick={() =>
      handleLinkAnalytics(
        'How is Flood Calculated?',
        '/methodology',
      )
    }
  >
    How is Flood Calculated?
  </a>
</Link>

针对App Router（Next.js 13+） #

App Router的<Link>已原生支持target、rel属性，只需确保自定义onClick事件不阻止默认跳转行为：

<Link
  href="/methodology"
  target="_blank"
  rel="noopener noreferrer"
  className="w-auto text-right text-sm text-riskfactor-400 underline underline-offset-2 hover:text-riskfactor-300 md:w-[345px]"
  onClick={(e) => {
    handleLinkAnalytics('How is Flood Calculated?', '/methodology');
    // 不要调用e.preventDefault()，保证默认跳转逻辑正常执行
  }}
>
  How is Flood Calculated?
</Link>

通用排查项 #

• 检查页面是否添加了正确的viewport meta标签，避免移动端300ms点击延迟：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 排查CSS样式中是否存在pointer-events: none、touch-action: none等干扰触摸事件的属性。
• 确认handleLinkAnalytics函数无异步阻塞逻辑，防止延迟默认跳转触发。

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