Next.js 13中如何使用查询参数？适配原Next.js 12用法咨询

在 Next.js 13 的 App Router 体系下，替代原 useRouter 来获取查询参数的是 useSearchParams API，以下是对应你需求的实现方式：

1. 导入 useSearchParams
   首先从 next/navigation 中导入该钩子：

   import { useSearchParams } from 'next/navigation';
   

2. 在客户端组件中使用
   注意 useSearchParams 仅能在客户端组件中使用，需要在组件文件顶部添加 'use client' 指令：

   'use client';
   
   import { useSearchParams } from 'next/navigation';
   
   export default function YourComponent() {
     const searchParams = useSearchParams();
     // 获取 id 查询参数
     const id = searchParams.get('id');
   
     // 后续业务逻辑
     return <div>当前ID: {id}</div>;
   }
   

3. 处理参数不存在的场景
   如果需要对 id 不存在的情况做兜底处理，可以设置默认值：

   // 用空字符串兜底
   const id = searchParams.get('id') || '';
   // 或者自定义默认值
   const id = searchParams.get('id') ?? '默认ID';
   

和 Next.js 12 中通过 useRouter 解构 query.id 的方式相比，useSearchParams 贴合 URLSearchParams 标准 API，除了 get 方法，还支持 has（判断参数是否存在）、getAll（获取多值参数）等操作。

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