Afficher un message après inscription dans NextJS

Question

J'ai une application NextJS 13 avec un formulaire d'inscription. L'API que j'intègre oblige les utilisateurs à vérifier leur adresse e-mail après leur inscription. Ce que je veux faire, c'est, une fois le formulaire d'inscription réussi, supprimer les champs du formulaire et afficher un message leur indiquant qu'ils doivent vérifier leur courrier électronique pour un e-mail de vérification, mais à la place, il redirige vers le formulaire de connexion. J'apprends actuellement NextJS, donc le code que j'utilise provient d'un exemple de référentiel. Est-il possible de le modifier pour afficher un message au lieu de rediriger vers la page de connexion ?

Ma page d'inscription ressemble à ceci :

'utiliser le client'

importer { useForm } depuis 'react-hook-form'

importer { useUserService } depuis '@/app/_services'

exporter par défaut

fonction Registre() {
    const userService = useUserService()

    const { registre, handleSubmit, formState } = useForm()

    fonction asynchrone onSubmit (utilisateur) {
        attendre userService.register (utilisateur)
    }

    retour (
        ≪>
            
                

                    <étiquette
                        htmlPour="email"
                    >
                        adresse e-mail
                    
                    
                
                

                    <étiquette
                        htmlPour="mot de passe"
                    >
                        mot de passe
                    
                    
                
                

                    
                        S'inscrire
                    
                
            
        ≪/>
    )
}
La fonction réellement enregistrée se trouve dans le fichier useUserService
register : async (utilisateur) =>
    alertService.clear()

    essayer {
        wait fetch.post('/api/authentication/register', utilisateur);

        routeur.push('/login');
    } attraper (erreur) {
        alertService.error(erreur);
    }
},            

Answer 1

Afin d'afficher le message sans rediriger vers la page de connexion, vous pouvez utiliser le hook useState pour gérer l'interface utilisateur en fonction du statut de réussite de l'inscription.

1. Importer useState

   import { useState } from 'react';

2. Ajouter un statut d'inscription réussi

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

3. Définissez le statut de réussite de l'inscription sur vrai

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

4. Si l'inscription réussit, affichez le message

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

   );

5. Supprimer router.push du service enregistré

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