NextJS 13 App Router中如何使用useRouter实现query参数跳转？

你之前的写法是旧版Pages Router的API，在App Router里不适用，因为App Router的路由API已经更新，下面是正确的实现方式：

1. 必须声明为客户端组件
   在使用路由跳转的组件顶部添加'use client'指令，App Router默认是服务器组件，无法直接调用客户端路由API：

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

2. 两种正确的跳转写法

   • 直接拼接URL字符串

     export default function DonateButton() {
       const router = useRouter();
       return (
         <button onClick={() => {
           router.push('/donate/payment?amount=20');
         }}>Donate</button>
       );
     }
     

   • 使用searchParams对象（替代旧版的query参数）

     export default function DonateButton() {
       const router = useRouter();
       return (
         <button onClick={() => {
           router.push({
             pathname: '/donate/payment',
             searchParams: { amount: 20 }
           });
         }}>Donate</button>
       );
     }
     

3. 常见排查点

   • 确认/donate/payment对应的页面组件存在于app/donate/payment目录下（App Router路由基于文件系统）
   • 打开浏览器控制台查看是否有报错，比如路由不存在、组件未声明为客户端组件等

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