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

【问题标题】：How to hide query params from the URL while using router.push?使用 router.push 时如何隐藏 URL 中的查询参数？
【发布时间】：2022-01-25 19:00:45
【问题描述】：

我通过查询参数将一些数据从一个页面传递到另一个页面，但我想隐藏 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 中的查询参数？或者有没有其他方法可以做同样的事情？

【问题讨论】：

标签： reactjs next.js next-router

【解决方案1】：

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

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

【讨论】：

参数在 router.push() 中不起作用。
@Jerry Next.js 有一个built-in router，它不使用react-router-dom。

【解决方案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')

【讨论】：

是的，它解决了我的问题。