1

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

当我使用 Nextjs 的useRouter钩子导航router.push到 api 路由时，它按预期工作，因此我的数据被传递到 api 路由并且 nextjs-auth0 按预期重定向用户。但是，在重定向浏览器控制台之前会闪烁以下错误：

在此处输入图像描述

我应该忽略这个错误吗？是否有可能router.push仅用于客户端重定向我正在尝试导航到 api 路由，这不是应该如何完成的？注意，我的/signupapi 路由使用 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 组件（注意，使用 <Button 组件是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 $1
                                            </Button>
                                        </form>
                                    )}
                                </Formik>
4

2 回答 2

2

动态路由的用法在这里。它可以像下面这样使用。第一个看起来更好。

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')
于 2020-07-13T07:17:45.133 回答
1

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

话虽这么说，next/router如果您想重定向到 API 路由或其他网站，它是没有用的。

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

于 2020-07-08T06:26:55.630 回答