如何与下一个路由器传递数据而不将其显示在 URL 中？

Question

我正在使用下一个路由器，我想将数据传递到另一个页面，但我不希望数据显示在 URL 中

我有一个按钮，一旦单击它就会重定向到另一个页面并向myObject其传递一个对象。

const router = useRouter();
const myObject = {
  proprety1: "example1",
  proprety2: "example2",
  proprety3: "example3",
}
//...
<button
   onClick={() => {
     router.push({
       pathname: "/next-page",
       query: { data: JSON.stringify(myObject) },
     });
   }}
 >
   Navigate
</button>

然后next-page我得到这个 URL ：

http://localhost:3000/next-page?data=%7B"proprety1"%3A"example1"%2C"proprety2"%3A"example2"%2C"proprety3"%3A"example3"%7D

这工作起来很清楚，但它真的很难看，不仅如此，我不希望在 url 中向用户显示数据。

Answer 1

as我相信您可以使用函数中的第二个参数router.push来完成您想要的任务。

router.push(url, as, options)

请参阅文档。