로그인 후 useNavigate를 이용한 리다이렉션 구현

로그인을 성공해도 로그인 화면으로 들어올 수 있는 문제를 마주하면서,
로그인을 성공하면 example.com/login (로그인 페이지) 으로 접근할 시 홈으로 보내주도록 구현했다.

( example.com은 가상의 페이지 )

 

react-router-dom의 버전이 바뀌면서
useHistory 대신 useNavigate를 사용하게 되었다.

.
.
.
import { useNavigate } from 'react-router-dom'; // useNavigate 사용

const Login = () => {
  const [email, setEmail] = useState(); // id
  const [password, setPassword] = useState(); // password 
  const { setUser, user } = useContext(AuthContext); // context로 전역상태를 관리하고 있고 로그인 성공시 user에 정보가 담긴다.
  const navigate = useNavigate(); 
  useEffect(() => {
    if (user) {
      navigate('/');  // 유저 정보가 있다면 'example.com/' 이라는 URL로 보내준다.
    } else return; // 유저정보가 없다면 해당 컴포넌트(로그인 화면)를 화면에 출력한다. 
  }, [user]);

  return (
      .
      .
      .
  )

생각보다 간단했다.