如何在 NEXT JS 中的路由之间传递状态?

时间:2021-03-07 06:16:55

标签: javascript node.js reactjs next.js

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

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

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

 const {query} = useRouter()

但问题是查询出现在 url 上并且 url 看起来不干净。如何将数据从一个页面发送到另一个页面,但不显示在 url 上?

我是 Next.js 的新手,所以任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

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

Router.push

<块引用>

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

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

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