我有一个带有注册表单的NextJS 13应用程序。我正在集成的API要求用户在注册后验证他们的电子邮件。我想要做的是,一旦注册表单成功,删除表单字段并显示一条消息,告诉他们需要检查他们的电子邮件以获取验证电子邮件,但实际上它一直重定向到登录表单。我目前正在学习NextJS,所以我正在使用的代码是从一个示例存储库中获取的。是否可能将其更改为显示消息而不是重定向到登录页?
我的注册页面如下所示:
'use client'
import { useForm } from 'react-hook-form'
import { useUserService } from '@/app/_services'
export default Register
function Register() {
const userService = useUserService()
const { register, handleSubmit, formState } = useForm()
async function onSubmit(user) {
await userService.register(user)
}
return (
<>
<form
onSubmit={handleSubmit(onSubmit)}
>
<div className="col-span-full">
<label
htmlFor="email"
>
电子邮件地址
</label>
<input
type="email"
{ ...register("email") }
/>
</div>
<div className="col-span-full">
<label
htmlFor="password"
>
密码
</label>
<input
type="password"
{ ...register("password") }
/>
</div>
<div className="col-span-full pt-5">
<button
disabled={formState.isSubmitting}
>
<span>注册</span>
</button>
</div>
</form>
</>
)
}
实际的注册函数位于useUserService文件中,具有以下详细信息:
register: async (user) => {
alertService.clear()
try {
await fetch.post('/api/authentication/register', user);
router.push('/login');
} catch (error) {
alertService.error(error);
}
}, Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
为了在不重定向到登录页面的情况下显示消息,您可以使用useState钩子根据注册成功状态来管理UI。
import { useState } from 'react';async function onSubmit(user) { await userService.register(user); setRegistrationSuccess(true); }return ( <> {registrationSuccess ? ( <p>请检查您的电子邮件以获取验证邮件。</p> ) : ( <form onSubmit={handleSubmit(onSubmit)}> </form> )} </>);
register: async (user) => { alertService.clear() try { await fetch.post('/api/authentication/register', user); } catch (error) { alertService.error(error); } },