Next.js中如何通过条件禁用<Link>组件（函数组件实现）

问题场景 #

现有如下Next.js的Link组件代码，用于实现博客文章的上下篇跳转：

<Link href={`/blog/${bdetails.id - 1}`}>
Prev Post
</Link>

<Link href={`/blog/${bdetails.id + 1}`}>
Next Post
</Link>

需求是在函数组件中通过简单的三元运算符或if条件实现：

• 当bdetails.id === 1时，禁用「上一篇」按钮（不可点击、样式区分）
• 当bdetails.id等于博客总数时，禁用「下一篇」按钮
• 不使用next/router，仅通过props传递的bdetails.id和[id].js中的blogData数组来判断边界

实现方案 #

首先需要将blogData数组也作为props传递给BlogDetailContent.js组件，这样就能获取博客总数，判断下一篇的边界。然后通过三元运算符控制渲染可点击的Link还是禁用状态的元素：

// BlogDetailContent.js 函数组件
import Link from 'next/link';

export default function BlogDetailContent({ bdetails, blogData }) {
  const totalPosts = blogData.length;

  return (
    <div className="post-nav">
      {/* 上一篇按钮 */}
      {bdetails.id === 1 ? (
        <span className="nav-btn disabled">上一篇</span>
      ) : (
        <Link href={`/blog/${bdetails.id - 1}`} className="nav-btn">
          上一篇
        </Link>
      )}

      {/* 下一篇按钮 */}
      {bdetails.id === totalPosts ? (
        <span className="nav-btn disabled">下一篇</span>
      ) : (
        <Link href={`/blog/${bdetails.id + 1}`} className="nav-btn">
          下一篇
        </Link>
      )}
    </div>
  );
}

补充说明 #

1. 样式处理：可以给禁用状态的按钮加disabled类，设置灰色、指针为not-allowed等样式，让用户直观感知不可点击：

.nav-btn.disabled {
  color: #999;
  cursor: not-allowed;
  text-decoration: none;
}

2. props传递：在[id].js中需要同时传递bdetails和blogData给子组件：

// [id].js
import BlogDetailContent from '../components/BlogDetailContent';
import blogData from '../data/blogData';

export default function BlogPost({ bdetails }) {
  return (
    <BlogDetailContent bdetails={bdetails} blogData={blogData} />
  );
}

// 这里假设你已经通过getStaticProps等方式获取了bdetails

内容的提问来源于stack exchange，提问作者Muhammad Sibtain