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

Question

我正在使用 auth0 nextjs-auth0 library to handle signup and authentication for a next.js app. I'm also using Formik 来处理输入数据和验证。我想通过 Formik 将电子邮件地址提交到 Next.js api 路由。

当我使用 Nextjs 的 useRouter 钩子通过 router.push 导航到 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)
    }
}

useRouter 钩子的导入：

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 提交的处理函数：

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

Formik 组件（注意，使用 Chakra-ui 组件）：

                                <Formik
                                    initialValues={{ email: "" }}
                                    onSubmit={handleFormikSubmit}
                                >
                                    {(props) => (
                                        <form onSubmit={props.handleSubmit}>
                                            <Field type="email" name="email" validate={validateEmail}>
                                                {({ field, form }) => (
                                                    <FormControl
                                                        isInvalid={
                                                            form.errors.email &&
                                                            form.touched.email
                                                        }
                                                    >
                                                        <Input
                                                            {...field}
                                                            id="email"
                                                            placeholder="Your email address..."
                                                        />
                                                        <FormErrorMessage>
                                                            {form.errors.email}
                                                        </FormErrorMessage>
                                                    </FormControl>
                                                )}
                                            </Field>
                                            <Button
                                                variantColor="orangish"
                                                width="100%"
                                                mt={2}
                                                className="checkout-style-background"
                                                isLoading={props.isSubmitting}
                                                type="submit"
                                            >
                                                Sign up to get started for 
                                            </Button>
                                        </form>
                                    )}
                                </Formik>

Answer 1

next/router 尽可能用于 本地页面 之间的客户端转换。 API 路由始终在服务器端执行，因此您无法对其执行客户端导航。

也就是说，如果您想重定向到 API 路由或其他网站，next/router 没有用。

相反，您可以使用 window.location.replace() 将用户重定向到 API 路由。

Answer 2

动态路由的用法是here。它可以像下面这样使用。第一个更好看。

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