[TIL] 2023.10.07 - useLocation() : 페이지 이동 시 데이터 전달

 state로 데이터 보내기 

// 회원가입 페이지

// POST : 회원가입 하기
  const navigate = useNavigate();

  const onClickSignUpCompleteHandler = async () => {
    // 에러메시지 있는지 확인
    if (
      emailMessage !== true ||
      passwordMessage !== true ||
      checkPassWordMessage !== true
    ) {
      alert("필수 정보를 올바르게 입력하세요.");
      return;
    } else if (emailAuthCompleted !== true) {
      alert("이메일 인증이 필요합니다.");
      return;
    }

    try {
      const response = await axiosInstance.post("/api/users/signup", {
        nickName: nickName || null, //닉네임이 비어있으면 null로 보내기
        email,
        password,
        profileImg: null,
      });
      console.log("response", response);

      if (response.data.statusCode === 201) {
        alert(response.data.msg);
        navigate("/signup/complete", { state: { nickName } });
        // 웰컴페이지로 닉네임 보내기!
        // state는 현재 주소와 관련된 상태 정보를 가지고 있으며, 일반적으로 라우팅에 필요한 데이터를 전달하기 위해 사용
      }
    } catch (error) {
      console.log("error", error);
      alert(error.response.data.msg);
    }
  };

 

 useLocation로 데이터 받기 

//웰컴 페이지

export default function SignUpCompletePage() {

  // useLocation : 회원가입 페이지에서 닉네임 받아오기!
  const { state } = useLocation(); // useLocation() 함수에서 반환된 객체에서 구조 분해 할당을 사용하여 state 변수를 추출
  const nickName = state.nickName; // state 객체에서 nickName 속성을 변수 nickName에 할당
  console.log({ state });

  return (
    <Layout>
      <div className="mb-3 text-lg font-bold">
        {nickName ? nickName : "익명"} 님
        {/* nickName이 없으면 익명 으로 표시 */}
      </div>
    </Layout>
  );
}

 

 참고 

• https://songacoding.tistory.com/73
• https://velog.io/@heesu0303/React-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%9D%B4%EB%8F%99%ED%95%98%EB%A9%B4%EC%84%9C-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0

[React][1분만에 해결] react navigate param

[React] 페이지 이동할 때, 데이터 전달하기