我如何在各种条件下在下一个JS中禁用<Link href="" />

Question

我的代码是： /blog/${bdetails.id - 1}}> 上一篇文章 /blog/${bdetails.id + 1}}> 下一篇文章

问题

我想根据条件导航到下一篇文章或上一篇文章。

解释

我的 [id].js 中有一个 blogData 数组，并通过使用这个组件的 props 来实现 bdetails.id ，即 BlogDetailContent.js 。 我想通过简单地禁用 bdetails.id === 1 上的上一个按钮来控制上一篇和下一篇文章，这里的按钮应该被禁用。我想要通过简单的三元运算符或 if 条件。我不想使用 next/router 。它应该由函数组件而不是类组件使用。

Answer 1

您可以只使用一个为元素提供

pointer-events: none;

的类，并有条件地添加或删除此类。

export default function Test {
    return (
      <Link href='/link' passHref><a className={someCondition ? 'disabled' : ''}>Link</a></Link>
    );
}

CSS

.disabled{
  pointer-events: none;
}

Answer 2

您不能再在 Next.js 中的

<a>

中使用

<Link>

。因此，您可以像这样禁用链接点击。

<Link
  href={url}
  target="_blank"
  style={{
    pointerEvents: (contidion) ? "none" : "auto",
  }}>
  Conditional Link
</Link>