How to hide query params from the URL while using router.push?

Question

I'm passing some data from one page to another via query params but I want to hide the query from the URL.

Here is my code.

import { useRouter } from "next/router";

const handleFormSubmit = async (values) => {
    const res = await AuthService.login(values.email, values.password);

    if (res.status === 200) {
   
       if (res.data.is_phone_number_exists === 1 && res.data.is_phone_number_verified === 0) {
        router.push({
          pathname: '/otp-verification',
          query: { email: values.email, password: values.password, phone_number: res.data.phone_number} //I want hide this query part from the url
        }) 
      }
    }
  }

How to hide the query params from the URL while using the router.push()? Or is there any other way for doing the same thing?

Answer 1

When using next/router, you can pass query parameters without being visible on the address bar using the second argument as in the router.push call.

router.push({
    pathname: '/otp-verification',
    query: { email: values.email, password: values.password, phone_number: res.data.phone_number }
}, '/otp-verification')

Answer 2

You can use as props with next/link as well, to hide query parameters. for Example:

<Link href={`/blogs/${item.slug}?id=${item.id}`} as={`/blogs/${item.slug}`} passHref>
    <a href="" className="hover:text-cyanBlue">
        Read More
    </a>
</Link>

Bear in mind, this won't work if you set target="_blank" to anchor tag or open link to next tab of browser.