navigate를 사용했는데 Invalid hook call. error 해결법

리액트 회원가입 부분을 만들면서 navigate로 회원가입 axios/post 후 메인으로 페이지 이동을 넣으려고 작성한 코드이다

// userSlice.js
import { useNavigate } from "react-router-dom";
ㅡㅡㅡㅡㅡㅡㅡ
export const signup = (username, nickname, password) => {
  return async function (dispatch) {
    
    const navigate = useNavigate();
    
    try {
      const repsonse = await axios.post("http://localhost:5001/signup", {
        username: username,
        nickname: nickname,
        imgPath: null,
        password: password,
      });
      console.log(repsonse);
      navigate("/");
    } catch (error) {
      console.log(error);
    }
  };
};

import와 navigate변수를 만들어주었고 요청 후 페이지 이동을 했지만 맨 위 사진과 같은 오류가 떴다.

그래서 오류를 찾아보던 중 리액트 버전과 관련이 있다하여 yarn, npm install을 다시 해본뒤 했지만 해결되지는 않았고

당연히 navigate 위치가 맞다고 생각해서 다른 문제가 있나 찾아보았다. 참고블로그에서는 버전문제 또는 함수호출 문제라고 하였고 위치가 다르거나 import 문제인가 했다. 오타와 함수호출시 ()을 작성하지 않은 부분도 있었지만

결론적으로는 axios 요청안에는 navigate를 작성할 수 없었다,

 

생각해보니 요청을 보낼 때 데이터는 확인 가능하나 컴포넌트가 다르기 때문에 여기서 걸어둔 navi함수가 발동되지 않는다는것을 이해하게 되었다. 버튼이 있는 같은 페이지라면 모를까 연결되는 버튼이 없다.

 

 

// Register.js

dispatch(
      signup(
        id_ref.current.value,
        nick_ref.current.value,
        pw_ref.current.value,
        pwCheck_ref.current.value,
      )
    );
    navigate("/");
  };

그래서 Register.js 부분에서 디스패치하는 과정에 navigate를 작성하였고 오류도 없이 말끔하게 넘어갔다.

 

 

추가 ㅡㅡㅡㅡ

 

navigate 대체 해결 부분!! 링크 남깁니다

2. navigate 오류

https://mothercargasoline.tistory.com/110

로그인, 회원가입 구현 어디까지 갔니? Truoble Shooting