使用Next.Js App Router,我如何在一个页面上提交表单,并将表单结果作为参数传递到另一个页面上的函数中?

wecizke3  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(134)

上下文我正在做一个Next.JS项目(应用路由器)。它有点类似于旅行预订网站,如Skyscanner。在我的主页(home.js)上,我有一个表单。提交表单将自动重定向到结果页面(results.js)。我的结果页面有一个函数,它调用我的python后端-这个函数的输出使页面内容能够显示。但是,它需要参数(在jsonified-output的形式中)。注意,这两个页面都是服务器页面(尽管表单是客户端组件),我想避免将任何一个页面更改为“使用客户端”。
问题我希望在results.js开始构建时就能够访问表单值。我如何才能最好地实现这一点?
我尝试了什么我尝试过将参数传递到URL(例如,使用useRouter),但希望避免这种情况,因为我的参数之一是用户的当前位置,我宁愿保持私密。我也考虑过使用React Context API,但Next.JS文档说服务器组件不再支持这一点。

提前感谢!

wpcxdonn

wpcxdonn1#

我设法想出了这个问题的解决办法。它涉及到使用“服务器操作”(目前仍然是Next.js中的实验性功能)。
我创建了一个标记为“use server”的文件,它导出了一个服务器函数。该函数接受一个参数,从中创建cookie,然后重定向到我的结果页面。
然后,我调用了这个服务器函数,作为我在客户端“home”页面上提交表单的结果,并使用我的jsonified表单数据作为参数。然后,我可以在我的“结果”页面上访问相关的cookie。
希望这对某人有所帮助:)

相关问题