회원가입 컴포넌트 이동 해결하기 (react)

 

react-hook-form 을 이용해 유효성 검사를 동시에 진행하며 error가 있을 때는 버튼을 클릭할 수 없게 하고 조건에 만족 하면 버튼을 클릭할 수 있게 설정했다. 

유효성 검사

여기까지는 react-hook-form을 이용해 잘 복습했다는 생각이 들었다..

 

근데... 유효성 검사를 완벽하게 진행 후... 제출을 누르니 페이지 이동이 안됐다. 

처음에는 옛날에 자주 사용했던... 잘 모르고 일단 Link를 사용하자! 했지만..

     <SingupButton disabled={!isValid} type="submit">
                  <Link to="/">회원가입</Link>
                </SingupButton>

조건을 무시한 상태로 제출이 됐다... (이러면 유효성 검사가 의미가 없잖아!!)

디코에서 재현님과 Daehun님에게 물어보니.. 바로 solution을 알려주셨다. (너무 멋있고 부러웠다..)

 

useNavigate 또는 redict를 사용하면 된다!  (redict은 뭔가 시도를 해봤는데 잘 안돼서.. 결국 useNavigate를 사용했다!)

UseNavigate

https://reactrouter.com/en/main/hooks/use-navigate

useNavigate v6.22.3 | React Router

- useNavigate는 react-router-dom에서 몇번 사용했지만 이런 용도(?)로 사용할 줄 몰랐다.

간단한 사용법은 내가 만든 onValid(유효성 체크를 해주는 함수)에다가 useNavigate()를 넣어 넘기는것이다!

const navigate = useNavigate();

//useForm function~~ 

//
//
const onValid = (data: IForm) => {
    if (data.password !== data.password1) {
      setError(
        "password1",
        { message: "Password are not the same" },
        { shouldFocus: true }
      );
    } else {
      navigate("/");
    }
  };

 

잘 넘어가졌다.... 비록 다른 사람들에게 얻은 정보였지만 클론 코딩이 아닌 오류를 찾아서 고쳐보는 행복을 느꼈다.