Next.js 13（App目录）如何携带查询参数跳转新页面

App Router 里的 useRouter（来自next/navigation）和 Pages Router 的 API 存在差异，它的push方法不支持通过第二个参数传入query对象来生成查询参数，你需要手动构建带查询参数的完整 URL。

推荐用URLSearchParams来处理，它会自动帮你处理特殊字符的编码（比如示例里的空格），避免出现 URL 格式问题：

import { useRouter } from "next/navigation";

const YourComponent = () => {
  const router = useRouter();

  const goToBlah = () => {
    const q = {
      foo: "red cat",
      bar: true
    };

    const searchParams = new URLSearchParams(q);
    const targetUrl = `/blah?${searchParams.toString()}`;

    router.push(targetUrl);
  };

  return <button onClick={goToBlah}>跳转至/blah</button>;
};

export default YourComponent;

如果参数结构简单，也可以手动拼接 URL，但记得用encodeURIComponent处理包含特殊字符的参数值：

const targetUrl = `/blah?foo=${encodeURIComponent("red cat")}&bar=true`;
router.push(targetUrl);

需要注意的是，App Router 中router.push的第二个参数是用于控制浏览器历史记录的选项（比如{ scroll: false }），不是用来传递查询参数的，这和 Pages Router 的用法完全不同。

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