iOS Safari 需要单击两次才能使预取链接正常工作

Question

在 Next 14.2 中，我有一堆使用 StackedList 和 HeadlessUI 的代码。其中包含的链接将 Prefetch 设置为 true，这在 Safari Mac、笔记本电脑浏览器上运行良好，但在 iOS Safari 上，该行为无法解释。如果有帮助，我会附上 StackList 中的一段代码。

<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>

我不知道如何解决这个问题，但我尝试禁用 Prefetch，这解决了问题，但它并没有给我带来很好的用户体验。请注意，并非所有预取打开的链接都有问题，例如当我位于特定路线 /space 上时，这些预取链接将不起作用。但是当我在不同的路线上时，即使那些具有预取功能的导航链接也能正常工作。

Answer 1

我花了一天的时间才弄清楚这一点，通过切换数十个组件组合终于得到了它。

这是错误的

<li key={`${page.name}-${Math.random(5}`} className="flex">

这是对的

<li key={`${page.name}-${useId}`} className="flex">

错误的方法导致预取无法在 iOS Safari 上运行。需要双击才能打开链接，单击无法打开链接。我知道超级奇怪。

虽然问题出在组件中，但它影响了周围使用 .只是将其放在这里，以防您将来遇到类似问题。

{pages.map((page) => (
          <li key={`${page.name}-${useId}`} className="flex">
            <div className="flex items-center">
              <svg
                className="h-full w-6 flex-shrink-0 text-gray-200"
                viewBox="0 0 24 44"
                preserveAspectRatio="none"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z" />
              </svg>
              <Link prefetch={true} scroll={false} href={page.href} className="truncate line-clamp-1 ml-4 text-sm font-medium text-gray-500 hover:text-gray-700" aria-current={page.current ? 'page' : undefined}>
                {page.name}
              </Link>
            </div>
          </li>
        ))}