React Router의 history (useHistory Hook)

history를 통해서 React 프로젝트에서 뒤로가기, 앞으로가기와 같은 기능을 쉽게 구현할 수 있다.

• useHistory라는 Hook을 이용하면, 더 유용하게 이를 구현할 수 있다.

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

const history = useHistory(); 

console.log(history);
// history가 어떤 기능을 가지고 있는지 확인할 수 있다.

<Button onClick={history.goBack}>뒤로가기</Button>
<Button onClick={history.goForward}>앞으로가기</Button>

• history에 push를 통해서 원하는 경로로 이동하게 만들 수도 있다.
• 버튼에 연결하여 사용한다.
• 버튼을 Link로 감싸면, 오류가 발생하기에 버튼에서 SPA를 구현하고자 한다면, history를 사용한다.
• 경로의 시작에 '/' 를 붙이지 않으면, 버튼 클릭시 경로가 중첩된다.
  🍉 ex. history.push(search/a); 와 같이 작성 시, 버튼을 클릭할 때 마다 /search/search/search/search/a 와 같이 경로가 쌓인다.
  🍉 ex. history.push(/search/a); 와 같이 작성하면 버튼을 여러번 눌러도, /search/a 경로로만 이동한다.

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

const history = useHistory(); 

const handleHistoryPush = () => {
	history.push('/');
}

<Button onClick={handleHistoryPush}>이동</Button>

// 버튼을 클릭하면, '/' 경로로 이동한다.

🍈 react-router-dom ^6 이상에서 useHistory가 사라졌다.

🍈 useNavigate를 대신 사용해야 한다.