성빈
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 사용법
1. useHistory란? useHistory는 리액트에서 URL주소를 변경할 때 사용하는 Hook이다. 예를 들어, 로그인 버튼 또는 여러 목록 중에서 하나를 선택하여 클릭했을 때, URL주소를 변경시켜 URL주소와 일치하는
phsun102.tistory.com
'React' 카테고리의 다른 글
dangerouslySetInnerHTML/html-react-parser (0) | 2024.08.06 |
---|---|
PDF 전환 라이브러리 비교 (jsPDF 라이브러리 + html2canvas 라이브러리, pdfmake, puppeteer, PDFKit, react-pdf) (0) | 2024.08.06 |
react-router-dom 오류 (2) | 2024.07.23 |
fetch와 axios (1) | 2024.07.23 |
텍스트 편집기 직접 만들기 (0) | 2024.03.21 |