如何使用 Next.js <Link> 预取 <button>？（并避免在使用 Tab 键导航时进行双重选择）

Question

辅助功能最佳做法建议对按钮元素使用 <button>。

Next.js 的预取可以通过 <Link> 完成。

但是，当您将两者结合使用 Tab 键进行导航时，它实际上会 select 该按钮两次。例如

<Link href="#">
  <a>
    This selects once
  </a>
</Link>

<Link href="#">
  <a>
     <button>
       This selects twice
     </button>
  </a>
</Link>

你可以这样做：

<button
  onClick={() => { window.location.href "#" }
>
  This only selects once
</button>

但这并没有预取。

Answer 1

这是给nuxt的你不需要那样做，你可以将道具和价值添加到 nuxtlink

<NuxtLink
 id="home-link"
 :to="localePath('/')"
 exact
 active-class="nav-active"
 tag="button"
 class="btn btn-primary"
  >
   Home/Any Name
</NuxtLink>

下一个最佳答案是正确的

export default function Login() {
  const router = useRouter()
  const onClick = useCallback((e) => {
      router.push('/dashboard')
  }, []);

  useEffect(() => {
    router.prefetch("/dashboard"); // Prefetch the dashboard page
  }, [])

  return (
      <button onClick={onClick}>Login</button>
  )
}

Answer 2

您可以在进入页面之前使用router.prefetch获取路线。检查 this 了解更多详情

export default function Login() {
  const router = useRouter()
  const onClick = useCallback((e) => {
      router.push('/dashboard')
  }, []);

  useEffect(() => {
    router.prefetch("/dashboard"); // Prefetch the dashboard page
  }, [])

  return (
      <button onClick={onClick}>Login</button>
  )
}

如何使用 Next.js <Link> 预取 <button>？（并避免在使用 Tab 键导航时进行双重选择）

How to use Next.js <Link> prefetch for a <button>? (And avoiding a double selection while navigating with Tab key)

accessibility

next.js

如何使用 Next.js <Link> 预取 <button>？ （并避免在使用 Tab 键导航时进行双重选择）

How to use Next.js <Link> prefetch for a <button>? (And avoiding a double selection while navigating with Tab key)

accessibility

next.js

如何使用 Next.js <Link> 预取 <button>？（并避免在使用 Tab 键导航时进行双重选择）