[React] 리액트 useNavigate 페이지 이동

Q. 로그인 완료되면 메인페이지로 이동해주세요

리액트로 로그인 기능 구현하던중 로그인이 완료되면 메인 페이지로 페이지로 이동하고싶었다.

검색해보니 useHistory를 사용하면 된다해서 사용했다가 이제는 useNavigate로 바뀌었다고 해서 적용해보았다.

사용하기전에 react-router-dom 을 설치하여야 한다.

npm i react-router-dom

//타입스크립트 사용한다면 밑에도 설치
npm i @types/react-router-dom

사용방법은 useHistory보다 간단해졌다. useNavigate('경로') 이렇게 경로만 적어주면 된다.

바로 코드로 알아보자.

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

// useNavigate를 사용하기위한 변수선언
const navigate = useNavigate();

const login = async () => {
    try {
        const res = await Api.post("http://localhost:8000/users/login", {
            userId,
            password,
        });
        //로그인이 완료되었을시, 조건문은 각자 서버응답에 맞게 설정
        if (res.status === 200) {
            //navagate 안에는 이동하고자하는 경로를 입력해준다.
            navigate("/main");
        }
    } catch (e) {
        console.log(e);
        }
    };

 

앵귤러에서의 Router도 navigation으로 이동하는데 앵귤러와 유사해진것같다.