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?

juliomalves · Accepted Answer · 2021-12-26 18:31:23Z

44

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

edited Dec 26, 2021 at 18:31

answered Dec 26, 2021 at 13:20

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

herbie Over a year ago

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.

juliomalves Over a year ago

@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).

codeMan Over a year ago

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.

juliomalves Over a year ago

@codeMan What doesn't work? Do you get any error? I'd suggest creating a new question with the code you've tried.

Imran AK Over a year ago

Works as expected

|

Anurag Tripathi · Accepted Answer · 2022-07-04 11:09:34Z

6

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.

answered Jul 4, 2022 at 11:09

Anurag Tripathi

1,1241 gold badge13 silver badges15 bronze badges

1 Comment

ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ Over a year ago

if we use this as then it not able to get it on searchParams

A.B.D · Accepted Answer · 2023-11-11 21:34:08Z

1

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>

answered Nov 11, 2023 at 21:34

A.B.D

911 silver badge2 bronze badges

Comments

Jerry · Accepted Answer · 2021-12-26 09:42:29Z

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

answered Dec 26, 2021 at 9:42

Jerry

1985 bronze badges

2 Comments

Ishrat Over a year ago

params doesn't work inside router.push().

juliomalves Over a year ago

@Jerry Next.js has a built-in router, it doesn't use react-router-dom.

furkankjs · Accepted Answer · 2024-09-05 12:41:32Z

0

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

answered Sep 5, 2024 at 12:41

furkankjs

312 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

7 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

7 Comments

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related