Next.js Link组件传参问题：SinglePost中router.query始终为undefined

你的代码问题出在href的query配置上：query必须是键值对格式的对象，不能直接传数值。直接写query: 2不符合Next.js的参数传递规则，导致router.query返回undefined。

正确写法（Pages Router 场景） #

1. 修改Link组件的传参方式 #

将query改为键值对对象，明确参数名：

<Link
  key={2}
  href={{
    pathname: "/singlePost",
    query: { id: 2 }, // 用键值对定义参数
  }}
>
  <Post></Post>
</Link>

2. 在SinglePost组件中获取参数 #

通过router.query解构对应参数名即可：

import { useRouter } from 'next/router';

export default function SinglePost() {
  const router = useRouter();
  const { id } = router.query; // 解构出id参数
  console.log(id); // 现在能正确获取到2

  // 补充：如果需要服务端渲染/静态生成获取参数，可使用getServerSideProps/getStaticProps
  // 示例（getServerSideProps）：
  // export async function getServerSideProps(context) {
  //   const { id } = context.query;
  //   return { props: { id } };
  // }
  // 组件直接接收props：function SinglePost({ id }) { ... }
}

动态路由场景（更推荐） #

如果你的singlePost是动态页面，建议将页面文件命名为pages/singlePost/[id].js，这样可以简化传参：

Link组件写法： #

<Link href={`/singlePost/${2}`}>
  <Post></Post>
</Link>

SinglePost组件获取参数： #

import { useRouter } from 'next/router';

export default function SinglePost() {
  const router = useRouter();
  const { id } = router.query;
  console.log(id); // 同样能获取到2
}

App Router（Next.js 13+）场景 #

如果使用App Router，参数获取方式不同：

1. 先创建动态路由文件app/singlePost/[id]/page.js
2. Link组件写法：

<Link href={`/singlePost/${2}`}>
  <Post></Post>
</Link>

3. 页面组件直接接收params参数：

export default function SinglePost({ params }) {
  console.log(params.id); // 获取到2
}

内容的提问来源于stack exchange，提问作者Captai-N