在NextJS中註冊後顯示一則訊息

Question

我有一個帶有註冊表單的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);
    }
},

Answer 1

為了在不重定向到登入頁面的情況下顯示訊息，您可以使用useState#鉤子根據註冊成功狀態來管理UI。

1. 導入useState

   import { useState } from 'react';

2. 新增一個註冊成功的狀態

   const [registrationSuccess, setRegistrationSuccess] = useState(false);

3. 將註冊成功狀態設為true

   async function onSubmit(user) {
       await userService.register(user);
       setRegistrationSuccess(true);
   }

4. 如果註冊成功，則渲染訊息

   return (
    <>
        {registrationSuccess ? (
            <p>请检查您的电子邮件以获取验证邮件。</p>
        ) : (
            <form onSubmit={handleSubmit(onSubmit)}>
   
            </form>
        )}
    </>

   );

5. 從註冊服務刪除router.push

   register: async (user) => {
       alertService.clear()
       try {
           await fetch.post('/api/authentication/register', user);
       } catch (error) {
           alertService.error(error);
       }
   },