如何在 NEXT JS 中的路由之间传递 state？

Question

我的页面中的 object 中有一个数据。 我想从该页面重定向到另一个页面以及如下代码所示的数据

const redirectAppointmentStep1 = (value) => {
    router.push({
      pathname: '/Appointment/bookingstep1',
      query: {value : value},
    })
  }

我在bookingstep1页面中收到了这样的数据

 const {query} = useRouter()

但问题是查询出现在 url 和 url 上看起来不干净。 如何将数据从一页发送到另一页，但不会出现在 url 上？

我是 Next.js 的新手，因此我们将不胜感激。

Answer 1

如果要发送“路由状态”，则必须通过查询字符串进行，但实际上可以通过as属性“屏蔽”浏览器中显示的路径。

路由器.push

as - 将在浏览器中显示的 URL 的可选装饰器。 Next.js之前

您可以装饰 URL 以匹配路径名。

const redirectAppointmentStep1 = (value) => {
  router.push({
    as: '/Appointment/bookingstep1',
    pathname: '/Appointment/bookingstep1',
    query: {value : value},
  })
}