Notice
Recent Posts
Recent Comments
Link
«   2025/03   »
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
Archives
Today
Total
관리 메뉴

성빈

useHistory 그리고 useNavigate 본문

React

useHistory 그리고 useNavigate

성빈나 2024. 7. 23. 22:02

 

⚠️ 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 사용법

1. useHistory란? useHistory는 리액트에서 URL주소를 변경할 때 사용하는 Hook이다. 예를 들어, 로그인 버튼 또는 여러 목록 중에서 하나를 선택하여 클릭했을 때, URL주소를 변경시켜 URL주소와 일치하는

phsun102.tistory.com