关于Next.js Link组件href对象中query属性的技术咨询

DevOps 小满

2026-4-8

嘿，看来你找到了Next.js官方文档里关于Link组件带查询参数跳转的用法示例，我来帮你拆解下这个写法的细节和实用技巧：

首先先明确这段代码的核心作用：它实现了点击后无刷新跳转到/about?name=test页面，这是Next.js客户端导航的标准写法之一。

代码逐部分解析

第一行import Link from 'next/link'：导入Next.js专门提供的客户端导航组件，它比原生<a>标签更适配Next.js的路由体系，能避免页面全量刷新，提升用户体验。
在Link组件的href属性里，我们用了对象格式来定义路由信息，而不是直接写字符串路径，这样拆分路径和参数会更清晰：
- pathname: '/about'：指定了要跳转的目标页面的基础路径
- query: { name: 'test' }：这就是你要传递的查询参数，这个对象里的键值对会被Next.js自动拼接成URL的查询字符串部分，也就是最终的?name=test
包裹的<Link>标签内部的“About”，就是用户在页面上看到的可点击文本内容。

实用扩展技巧

传递多个查询参数：如果需要传多个参数，直接在query对象里添加更多键值对即可，比如：
```
<Link href={{
  pathname: '/about',
  query: { name: 'test', userId: '1234' },
}}>
  About with multiple params
</Link>
```
最终会生成跳转链接/about?name=test&userId=1234

在目标页面获取查询参数：跳转到/about页面后，你可以用Next.js的useRouter钩子来读取这些参数：

import { useRouter } from 'next/router'

export default function AboutPage() {
  const router = useRouter()
  // 从query中解构出需要的参数
  const { name, userId } = router.query
  return (
    <div>
      <p>Hello, {name}!</p>
      <p>Your user ID is: {userId}</p>
    </div>
  )
}