How to pass state between routes in NEXT JS?

Question

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.

Answer 1

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

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

You can decorate the URL to match the path name.

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