React 회원가입 페이지 만들기

에러발생🤬

아래와 같이 props.history.push을 사용하여 login페이지로 전환 시켰는데 에러가 발생했다.

---

 dispatch(registerUser(body)).then(response => {
            if (response.payload.success) {
               props.history.push("/login");
            } else {
                alert("Failed to sign up")
            }
        })
    }

---

에러 발생 이유를 찾아보니 history.push는 react-router-dom에 속한 기능이다. 내 코드를 보니 아래처럼 useNavigate를 import했었다.

---

import { useNavigate  } from "react-router-dom";

---

내가 해결한 방법은 useNavigate()로 navigate를 만들고
파라미터 값으로 path를 넣어주었다.

const navigate = useNavigate();


  dispatch(registerUser(body)).then(response => {
            if (response.payload.success) {
                navigate("/login");
            } else {
                alert("Failed to sign up")
            }
        })
    }

---

에러를 해결했지만,,,

react-router-dom과 useNavigate는 뭐냐??

---

React-Router?

react-router-dom은 react-router다.

그러면 react-router는 뭐냐??

react를 위한 모든 기능을 갖춘 client and server routing 라이브러리이다.

그러면 routing은 뭐냐 ??
-> 어떤 네트워크 안에서 통신 데이터를 보낼 때 최적의 경로를 선택하는 과정이다. 라고 위키백과에 설명되어 있다.

---

useNavigate

react-router-dom에 있는 API이다. Started guide에 다음과 같이 설명되어 있다.

대부분의 경우 URL 변경은 사용자가 링크를 클릭하는 것에 대한 응답입니다. 그러나 때때로 개발자가 URL을 변경하고 싶을 때가 있다.

예시)
1. 회원가입 후 로그인 페이지로 전환
2. 로그아웃 후 메인 페이지로 전환

페이지 전환을 위해 사용되는 API다 😎

---