如何在使用 router.push 时隐藏 URL 的查询参数？

Question

我正在通过查询参数将一些数据从一个页面传递到另一个页面，但我想隐藏来自 URL 的查询。

这是我的代码。

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

如何在使用 router.push() 时隐藏 URL 的查询参数？或者有没有其他方法可以做同样的事情？

Answer 1

如果你不想显示参数，你可以在 push 方法中使用参数属性。

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

在下一个 <Link> 组件中还有一个 as 道具。不确定是否可以在 push 方法中使用它

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

Answer 2

使用 next/router 时，您可以在 router.push 调用中使用第二个参数 as 传递查询参数，而不会在地址栏上显示。

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

如何在使用 router.push 时隐藏 URL 的查询参数？

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

reactjs

next.js

next-router