iOS Safari中带Prefetch的Link需点击两次才生效问题求助

问题现象 #

在Next.js 14.2环境中使用HeadlessUI的StackedList组件时，开启prefetch={true}的<Link>在Mac Safari及其他桌面浏览器中跳转正常，但在iOS Safari下，处于/space路由时需要点击两次才能触发跳转，其他路由下无此问题。关闭prefetch可解决，但会牺牲预加载带来的用户体验。

相关代码片段：

<div className="flex min-w-0 gap-x-4 items-center">
  {drag}
  <div className="min-w-0 flex-auto">
    <p className="text-md font-semibold leading-6 text-gray-900">
      <Link prefetch={true} scroll={false} href={href} className="hover:underline truncate line-clamp-1">
        <span className="flex flex-row gap-2 items-center">
          {segments.includes(item.slug) && <span className="flex w-3 h-3 me-3 bg-indigo-500 rounded-full"></span>}
          {item.name}
        </span>
      </Link>
    </p>
    <p className="mt-1 flex text-xs leading-5 text-gray-500 truncate line-clamp-1">
      {item.description}
    </p>
  </div>
</div>

可能原因 #

1. iOS Safari的触摸事件机制与Next.js的prefetch逻辑存在冲突，在HeadlessUI组件内部可能出现事件冒泡被拦截、预加载状态未正确重置的情况。
2. /space路由附带的拖拽功能（{drag}）可能优先处理触摸事件，导致第一次点击仅触发预加载，未触发跳转。

解决方案 #

方案1：动态控制prefetch，针对iOS Safari + /space路由优化 #

通过检测用户代理和当前路由，仅在非iOS Safari或非/space路由时开启prefetch，iOS Safari下的/space路由改用prefetch="visible"平衡体验与功能：

import { usePathname } from 'next/navigation';

// 检测iOS Safari
const isIOSSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
const pathname = usePathname();
// 仅在非iOS Safari或非/space路由时开启自动prefetch
const shouldPrefetch = !(isIOSSafari && pathname.startsWith('/space'));

// 在Link中使用
<Link 
  prefetch={shouldPrefetch} 
  scroll={false} 
  href={href} 
  className="hover:underline truncate line-clamp-1"
>
  {/* 原有内容不变 */}
</Link>

方案2：阻止事件冒泡，确保Link优先响应点击 #

在Link内部的span上添加事件阻止冒泡，避免HeadlessUI组件拦截触摸事件：

<Link prefetch={true} scroll={false} href={href} className="hover:underline truncate line-clamp-1">
  <span 
    className="flex flex-row gap-2 items-center"
    onClick={(e) => e.stopPropagation()}
  >
    {segments.includes(item.slug) && <span className="flex w-3 h-3 me-3 bg-indigo-500 rounded-full"></span>}
    {item.name}
  </span>
</Link>

方案3：手动控制预加载逻辑 #

放弃自动prefetch，改用useRouter手动在组件挂载或可见时触发预加载，同时确保点击事件直接触发跳转：

import { useRouter, usePathname } from 'next/navigation';
import { useEffect } from 'react';

const MyListItem = ({ href, item, segments, drag }) => {
  const router = useRouter();
  const pathname = usePathname();
  const isIOSSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  useEffect(() => {
    // 非iOS或非/space路由时手动触发预加载
    if (!(isIOSSafari && pathname.startsWith('/space'))) {
      router.prefetch(href);
    }
  }, [router, href, isIOSSafari, pathname]);

  return (
    <div className="flex min-w-0 gap-x-4 items-center">
      {drag}
      <div className="min-w-0 flex-auto">
        <p className="text-md font-semibold leading-6 text-gray-900">
          <Link scroll={false} href={href} className="hover:underline truncate line-clamp-1">
            <span className="flex flex-row gap-2 items-center">
              {segments.includes(item.slug) && <span className="flex w-3 h-3 me-3 bg-indigo-500 rounded-full"></span>}
              {item.name}
            </span>
          </Link>
        </p>
        <p className="mt-1 flex text-xs leading-5 text-gray-500 truncate line-clamp-1">
          {item.description}
        </p>
      </div>
    </div>
  );
};

验证建议 #

• 测试iOS Safari下/space路由的Link点击行为，确认单次点击即可跳转
• 检查其他路由的prefetch功能是否正常工作，确保用户体验不受影响

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