如何用Formik使用Next.js router.push到动态api路由，得到404（未找到）错误

我正在使用auth0库处理next.js应用程序的注册和身份验证。我还使用它来处理输入数据和验证。我希望通过Formik将电子邮件地址提交到Next.js api路由

当我使用Nextjs的

useRouter

hook通过

router导航时。将
推送到api路由，它会按预期工作，因此我的数据会传递到api路由，Nextjs-auth0会按预期重定向用户。但是，在重定向浏览器控制台之前，会闪烁以下错误：


我应该忽略这个错误吗？有没有可能，
router.push
只用于客户端重定向？我正在尝试导航到一个api路由，这不是应该怎么做的？注意，我的
/signup
api路由使用auth0 nextjs代码并将用户重定向到auth0的身份验证页面。相关代码如下

注册api路由：

import auth0 from "../../../lib/auth0"

export default async function signup(req, res) {

    const {
        query: { pid },
    } = req


    try {
        await auth0.handleLogin(req, res, {
            authParams: {
                initialScreen: "signup",
                login_hint: pid
            },
        })
    } catch (error) {
        console.error(error)
        res.status(error.status || 500).end(error.message)
    }
}

用户外部钩子的导入：

import { useRouter } from 'next/router'

Formik的验证功能：

    function validateEmail(value) {
        let error;
        let re = /\S+@\S+\.\S+/

        if (!value) {
            error = "Email is required"
        } else if (!re.test(value)) {
            error = "Please use a valid email"
        }

        return error
    }


Formik submit的处理函数：

    const handleFormikSubmit = async (values, actions) => {
        router.push('/api/signup/[...pid]', `/api/signup/${values.email}`)
        actions.setSubmitting(false)
    }

Formik组件（注意，使用(
{（{field，form}）=>(
{form.errors.email}
)}
以1美元的价格注册开始
)}
下一个/router
尽可能用于本地页面之间的客户端转换。API路由始终在服务器端执行，因此您无法对其执行客户端导航

也就是说，
next/router
在您想要重定向到API路由或其他网站时是没有用的

相反，您可以使用
window.location.replace（）
将用户重定向到API路由。
动态路由的用法是。它可以像下面这样使用。第一个看起来更好

import Router from 'next/router'

  ...

Router.push('/post/[pid]', '/post/abc')

⠀⠀或

import { useRouter } from 'next/router'

  ...

const router = useRouter()

   ...

router.push('/post/[pid]', '/post/abc')

这似乎起作用了，现在404错误消失了。我将以下路由器替换为：window.location.replace（
/api/signup/${values.email}
），现在使用window.location.replace（
/api/signup/${values.email}
）方法，在auth0登录页面上，我必须按两次后退按钮才能返回到服务器上的应用程序。之前只有一次。你知道如何只需单击一下就立即返回到我的应用程序吗？谢谢你的回答！@RancheroBeans，我不确定，但可以尝试
window.location.href=/api/signup/${values.email}
相反，你是对的，这很好。我现在可以使用一次反按返回到我的应用程序。一个轻微的澄清是，我必须在backticks中包含/api/signup/${values.email}部分。我将尝试在这里编写，但不确定格式是否会出错：
window.location.href=
/api/signup/${values.email}``是的，格式被弄乱了，所以我将用[backtick]来表示backtick：
window.location.href=[backtick]/api/signup/${values.email}[backtick]
import { useRouter } from 'next/router'

  ...

const router = useRouter()

   ...

router.push('/post/[pid]', '/post/abc')