Next.js 13.1.5中如何通过Link组件传递contact.name数据？

针对你使用Next.js 13.1.5遇到的问题，要在Link中传递contact.name且不显示在URL里，最佳方式是使用路由状态（Route State），具体实现分两种路由场景：

如果你用的是App Router（app目录） #

1. 修改Link组件的写法 #

直接在Link上添加state属性传递数据，href保持你原来的字符串格式即可：

<Link
  className={styles.summaryLink}
  href={`${routes.accountShow(contact.number)}/contacts`}
  state={{ contactName: contact.name }}
>
  {contact.name}
</Link>

这里的state数据会存在路由内存中，不会出现在URL里。

2. 在目标页面接收数据 #

目标页面需要是客户端组件（添加'use client'指令），用useRouter钩子获取状态：

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

export default function ContactsPage() {
  const router = useRouter();
  // 从路由状态中取出传递的contactName
  const contactName = router.state?.contactName;

  return <div>当前联系人：{contactName}</div>;
}

如果你用的是Pages Router（pages目录） #

1. 修改Link组件的写法 #

Pages Router的Link支持对象格式的href，但要把数据放在state字段而非query（query会显示在URL）：

<Link
  className={styles.summaryLink}
  href={{
    pathname: `${routes.accountShow(contact.number)}/contacts`,
    state: { contactName: contact.name }
  }}
>
  {contact.name}
</Link>

2. 在目标页面接收数据 #

用next/router的useRouter钩子获取状态：

import { useRouter } from 'next/router';

export default function ContactsPage() {
  const router = useRouter();
  const contactName = router.state?.contactName;

  return <div>当前联系人：{contactName}</div>;
}

为什么你之前的写法报错？ #

你之前用href={{ pathname: ..., query: ... }}是Pages Router的用法，如果你的项目是App Router，这种写法会直接报错——因为App Router的Link不支持这种对象格式的href，而且query参数本来就会显示在URL里，不符合你的需求。

注意：路由状态存在内存中，刷新页面后会丢失，如果需要持久化数据，可以结合本地存储，但这会脱离路由上下文，根据你的需求，路由状态是最优选择。

内容的提问来源于stack exchange，提问作者Karnveer Grewal