NextJS에 등록 후 메시지 표시

Question

<p>등록 양식이 포함된 NextJS 13 애플리케이션이 있습니다. 제가 통합하려는 API에서는 사용자가 가입 후 이메일을 확인해야 합니다. 내가 하고 싶은 일은 등록 양식이 성공적으로 완료되면 양식 필드를 제거하고 이메일에서 확인 이메일을 확인해야 한다는 메시지를 표시하는 것입니다. 대신 로그인 양식으로 리디렉션됩니다. 저는 현재 NextJS를 배우고 있으므로 제가 사용하는 코드는 샘플 저장소에서 가져왔습니다. 로그인 페이지로 리디렉션하는 대신 메시지를 표시하도록 변경할 수 있나요? </p> <p>내 등록 페이지는 다음과 같습니다:</p> <pre class="brush:php;toolbar:false;">'클라이언트 사용' 'react-hook-form'에서 { useForm } 가져오기 '@/app/_services'에서 { useUserService } 가져오기 기본 레지스터 내보내기 함수 레지스터() { const userService = useUserService() const { 레지스터, 핸들 제출, formState } = useForm() 비동기 함수 onSubmit(user) { userService.register(사용자)를 기다립니다. } 반품 ( <> <양식 onSubmit={handleSubmit(onSubmit)} > <div className="col-span-full"> <라벨 htmlFor="이메일" > 이메일 주소 </라벨> <입력 유형="이메일" { ...등록("이메일") } /> </div> <div className="col-span-full"> <라벨 htmlFor="비밀번호" > 비밀번호 </라벨> <입력 유형="비밀번호" { ...등록("비밀번호") } /> </div> <div className="col-span-full pt-5"> <버튼 비활성화={formState.is제출 중} > 등록 </버튼> </div> </양식> </> ) }</pre> <p>실제 등록된 함수는 다음 세부정보와 함께 <code>useUserService</code> 파일에 있습니다. </p> <pre class="brush:php;toolbar:false;">register: async (사용자) => 경고서비스.clear() 노력하다 { fetch.post('/api/authentication/register', user)를 기다립니다. router.push('/login'); } 잡기(오류) { AlertService.error(오류); } },</pre>

Answer 1

로그인 페이지로 리디렉션하지 않고 메시지를 표시하려면 useState 후크를 사용하여 등록 성공 상태에 따라 UI를 관리하면 됩니다.

1. useState 가져오기 으아악
2. 등록 성공 상태 추가 으아악
3. 등록 성공 상태를 true로 설정 으아악
4. 등록이 성공하면 메시지를 렌더링합니다. 으아악

   );

5. 등록된 서비스에서 router.push를 제거하세요. 으아악