如何在各种情况下禁用下一个 JS 中的 <Link href=\"\" />答案

【问题标题】：How Can i disable <Link href="" /> in next JS on various conditions如何在各种情况下禁用下一个 JS 中的 <Link href=\"\" />
【发布时间】：2022-12-20 01:56:17
【问题描述】：

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

问题

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

解释

我的 blogData 数组[id].js并通过对我的这个组件使用道具来实现 bdetails.idBlogDetailContent.js. 我想通过简单地禁用 bdetails.id === 1 上的上一个按钮来控制上一篇和下一篇文章，这里的按钮应该被禁用。我想要通过简单的三元运算符或 if 条件来实现。我不想用下一个/路由器.它应该由功能组件而不是类组件使用。

【问题讨论】：

标签： javascript next.js hyperlink

【解决方案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;
}

【讨论】：

我做到了，但现在下一个按钮给我带来了一个问题，我有一个对象数组并想访问它，但它给出了未定义的。我想继续使用 localhost:3000/blog/6 的 URL。我在一个数组中有 6 个对象。但是当我写 blogDetails.id + 1 时，它跨越了我不想要的对象。URL 变为：localhost:3000/blog/7
如果在 Link 上应用自定义类名不起作用，请尝试使用 anchor 标签作为它的子标签；像这样：<Link href="/somewhere" passHref><a className="YOUR_CUSTOM_CLASS">YOUR TEXT</a></Link>
@AliBaghban，感谢您通知我，我刚刚更新了答案。