13

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?

juliomalves
  • 42,130
  • 20
  • 150
  • 146
Ishrat
  • 251
  • 1
  • 6
  • 16

3 Answers3

40

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')
juliomalves
  • 42,130
  • 20
  • 150
  • 146
  • The issue with this solution is if you refresh the page you lose the ```as``` options you've passed, making it pretty redundant for api calls unless your storing the value somewhere that will persist. I think the only workable option is to pass a non sensitive data as a query param and then make an api call on the page you would like the sensitive data. – herbie Jun 15 '22 at 22:17
  • @herbie That would always be the case when hiding parameters from the URL in the address bar - which is what OP asked for. If you need the hidden params across page reloads then you either do not hide the params at all (after all that's what query params are for - to pass/persist a certain context), or persist the values you need on the client-side (localStorage or cookies). – juliomalves Jun 15 '22 at 23:27
  • This doesnt work for me! I have tried `import { useRouter } from "next/router";` and `import Router from "next/router";` it doesnt work with either. Please help. – codeMan Jan 22 '23 at 22:36
  • @codeMan What doesn't work? Do you get any error? I'd suggest creating a new question with the code you've tried. – juliomalves Jan 22 '23 at 23:56
5

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.

Anurag Tripathi
  • 784
  • 1
  • 13
  • 13
0

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" />
Jerry
  • 188
  • 5