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

【问题标题】：how to pass data between pages in Nextjs 13 with router.push()?如何使用 router.push() 在 Nextjs 13 中的页面之间传递数据？
【发布时间】：2023-02-07 23:27:45
【问题描述】：

当使用 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/>
   </>
  )
}

【问题讨论】：

标签： javascript reactjs next.js

【解决方案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}&amp;orderid=${orderid}`);

我希望这有帮助。

【讨论】：