useHistory 그리고 useNavigate

 

⚠️ useHistory는 react-router 버전5까지 사용할 수 있다. react-router-dom 버전6로 업데이트 되면서 useHistory가 useNavigate로 바뀌었다.

 

useHistory훅

리액트에서 URL 주소를 변경할 때 사용하는 훅이다.

리액트 특성상, URL변경없이 내부 컴포넌트만 변경시켜 화면을 바꿔줄수 있지만, 핵심 컴포넌트들이 변경될 때 URL 주소를 같이 변경시켜주면 사용자 친화적인 페이지가 될 수 있다.

 

useHistory() 사용하기

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

export default function SelectExam() {
  const history = useHistory();
}

const handleSubmit = (e) => {
    e.preventDefault();
      const format_info = {
        '시험 종류': examType,
        'tagType': checkType,
        'include' : keywords,
        'limit': select,
      }

      history.push("/lab"); // 페이지 이동
  }

return (
	<form action="" onSubmit={handleSubmit}>
		<input type="submit" value="Submit"/>
  </form>
);

 

---

참고

https://phsun102.tistory.com/91

React - useHistory 사용법