React - Router2

이번엔 리액트 라우터의 기능 중 Link, History에 대해 알아보겠습니다.

 

① <Link>태그 사용법 

 

<Link to="이동할 경로"></Link>

 

Ex)

 <Nav.Link> <Link to="/">Home</Link> </Nav.Link>

 

사용하고 싶은 태그 안에 <Link> 태그를 넣어주면 됩니다. 

 

 

② History 사용법

 

우선 History를 사용하기 위해서는 이 기능을 사용하고자 하는 js 파일 상단에 다음과 같은 코드를 넣어줘야 합니다.

 

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

 

useState를 통해 state를 만들 때와 유사합니다. react-router-dom이라는 라이브러리로부터 useHistory 훅을 사용하겠다는 코드입니다.

 

일단 이렇게 import를 해놓고 아무 변수에 useHistory() 함수를 저장하면 됩니다.

 

let history = useHistory();

 

그러면 이제 history 변수에는 object {  } 자료가 하나 저장되어 있습니다. object 안에 다양한 유용한 함수들이 저장되어 있습니다.

 

버튼을 눌렀을 때 뒤로가기가 되는 기능을 만들어 보겠습니다. useHistory를 사용하면 간단하게 개발이 가능합니다.

 

<button onClick={ ()=>{ history.goBack()} }>버튼</button>

 

이렇게 하면 버튼을 눌렀을 때 뒤로가기가 됩니다. goBack 함수는 history 오브젝트 안에 있는 함수입니다.