Next.js 14中使用Link包裹tr标签出现Hydration Error的问题求助

嘿，这个问题我之前也踩过坑！其实核心原因是HTML的语义规则在搞鬼——Next.js的<Link>组件最终会渲染成<a>标签，而HTML规范里明确规定，<a>不能直接作为<tr>的父元素，这就导致服务端渲染的DOM结构和客户端Hydration后的结构对不上，自然就触发Hydration错误了。

你不想把整个组件改成客户端组件的心情我完全理解，给你两个可行的解决思路：

• 方法一：将Link嵌入td中，实现整行可点击（无需客户端组件）
  我们可以把<Link>放到每个<td>内部，同时给<tr>添加鼠标指针样式，让用户感知到整行可点击，这样既符合HTML规范，又能保持组件的服务端渲染特性。修改后的代码如下：

import Link from "next/link";

export default function Home() {
  return (
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr style={{ cursor: 'pointer' }}>
          <td>
            <Link href="#" passHref>
              John
            </Link>
          </td>
          <td>
            <Link href="#" passHref>
              Williums
            </Link>
          </td>
        </tr>
      </tbody>
    </table>
  );
}

这里的passHref属性是让Link把跳转地址传递给内部元素，确保跳转逻辑正常工作。

• 方法二：封装小型客户端组件处理跳转（主组件仍为服务端组件）
  如果你更倾向于整行绑定一个点击事件，可以把跳转逻辑封装成一个独立的小型客户端组件，主组件依然保持服务端渲染的状态。具体步骤如下：
  1. 先创建一个客户端组件TableRowLink.jsx：

'use client';
import { useRouter } from 'next/navigation';

export default function TableRowLink({ href, children }) {
  const router = useRouter();
  const handleClick = () => {
    router.push(href);
  };

  return <tr onClick={handleClick} style={{ cursor: 'pointer' }}>{children}</tr>;
}

2. 在你的服务端组件中引入并使用这个组件：

import TableRowLink from './TableRowLink';

export default function Home() {
  return (
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
        </tr>
      </thead>
      <tbody>
        <TableRowLink href="#">
          <th>John</th>
          <td>Williums</td>
        </TableRowLink>
      </tbody>
    </table>
  );
}

这样只有负责点击跳转的小组件是客户端组件，主组件的服务端渲染特性完全不受影响，完美满足你的需求。

备注：内容来源于stack exchange，提问作者Nusab19