Next.js中使用useRouter同时实现重定向与添加查询参数

要实现从任意页面重定向到/user?id=123，你之前尝试的连续两次router.push的方式会因为异步操作冲突导致失效，这里提供两种可靠的实现方案：

方案一：组件内客户端重定向（推荐） #

直接通过router.push传入包含路径和查询参数的对象，一次操作完成跳转，避免异步冲突：

import { useRouter } from 'next/router';

// 在函数组件内部使用
const router = useRouter();
router.push({
  pathname: '/user',
  query: { id: '123' }
});

这种方式是Next.js官方推荐的带参数跳转写法，能确保路径和参数同时生效，不会出现状态混乱的问题。

方案二：服务端渲染场景下的重定向 #

如果需要在页面加载前（比如getServerSideProps或getStaticProps中）完成重定向，可以直接返回重定向配置：

export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/user?id=123',
      permanent: false, // 临时重定向设置为false，永久重定向改为true
    },
  };
}

为什么原代码失效？ #

两次router.push都是异步操作，第一次跳转还未完成就修改router.query并执行第二次跳转，会导致路由状态紊乱；同时直接修改router.query并非官方推荐的参数传递方式，容易引发不可预期的路由行为。

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