如何在 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},
  })
}