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

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?

CodePudding user response：

you can use params property in push method if you don't want the parameters show up.

router.push({
          pathname: '/otp-verification',
          params: { email: values.email, password: values.password, phone_number: res.data.phone_number} //I want hide this query part from the url
        })

also there is a as prop in next <Link> component. not sure if you can use that in push method

<Link to= "/posts?title=test" as="/posts" />

CodePudding user response：

When using next/router, to pass query parameters without them being visible on the address bar you can use 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')