如何使用 router.push() 在 Nextjs 13 中的页面之间传递数据？

Question

我想在使用 的方法导航时以编程方式在页面之间传递useRouter数据push()。以下代码将我重定向到 url http://localhost:3000/[object%20Object]，但我希望它能带我到http://localhost:3000/home?userid=deepeshdm&orderid=12345. 为什么会这样，我该如何解决？

// app/page.js

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

export default function Home() {

  const router = useRouter();

  const handleClick = () => {
    router.push({
      pathname: '/home',
      query: { userid: 'deepeshdm', orderid: '12345' },
    });
  };

  return (
   <>
   <h1 align="center"> Root Page </h1>  <br/>
   <button onClick={handleClick}> GO HOME </button>  <br/>
   </>
  )
}

Answer 1

它出现在 Next.js 13 中，router.push()仅接受字符串。

看起来他们已经放弃了pathname只读query挂钩。

解决这个问题的方法是使用模板文字字符串插值： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

router.push(`/home?userid=${userid}&orderid=${orderid}`);

我希望这有帮助。