CODEWITHSUNDEEP
reactjsnext.jsnext-router
Ishrat
Ishrat

Reputation: 281

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

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?

Upvotes: 16

Views: 34687

Answers (5)

furkankjs
furkankjs

Reputation: 31

Just use with as.

      push(
        {
          pathname: "/games/1023123", // to route
          query: { data: JSON.stringify({name: "john",surname:"doe"}) }, //parameters
        },
        "/games/pinball" // as prop (what browser shows in url)
      )

Upvotes: 0

A.B.D
A.B.D

Reputation: 91

To hide your parameters on the url you can use the linkAs prop

    <Link href={`/blogs/${item.slug}?id=${item.id}`} linkAs={`/blogs/${item.slug}`}> Read More </Link>

Upvotes: 1

Anurag Tripathi
Anurag Tripathi

Reputation: 1094

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.

Upvotes: 6

juliomalves
juliomalves

Reputation: 50418

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')

Upvotes: 44

Jerry
Jerry

Reputation: 198

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" />

Upvotes: 0

Related Questions