如何在 NEXT JS 中的路由之间传递状态? [英] How to pass state between routes in NEXT JS?

问题描述

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

const redirectAppointmentStep1 = (value) =>{路由器.push({pathname: '/Appointment/bookingstep1',查询:{值:值}，})}

我在 bookingstep1 页面中收到了该数据，如下所示

 const {query} = useRouter()

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

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

解决方案

如果要发送路由状态"你必须通过查询字符串来做，但你实际上可以屏蔽".通过 as 属性在浏览器中显示的路径.

Router.push

<块引用>

router.push(url, as, options)

as - 将显示在浏览器.

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

const redirectAppointmentStep1 = (value) =>{路由器.push({pathname: '/Appointment/bookingstep1',查询:{值:值}，},'/Appointment/bookingstep1',//作为"争论)}

I have a data inside an object in my page. I want to redirect from that page to another page along with the data like the code below

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

and I received that data in bookingstep1 page like this

 const {query} = useRouter()

but the problem is the query appear on the url and the url does not look clean. How can I send the data from one page to another page but without appearing it on the url?

I am new in Next.js so any help will be highly appreciated.

解决方案

If you want to send "route state" you have to do it via query string, but you can actually "mask" the path that is shown in the browser via the as property.

Router.push

router.push(url, as, options)

as - Optional decorator for the URL that will be shown in the browser.

You can decorate the URL to match the path name.

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

这篇关于如何在 NEXT JS 中的路由之间传递状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！