Last updated
Last updated
React router는 Client-side에서 페이지 분할이 가능하도록 하는 기술이다.
설치 후 package.json
파일에 다음과 같이 추가되어 있어야 한다.
Router를 사용하기 위해 다음과 같이 index.js
에 설정한다.
사용할 수 있는 Router는 두 가지가 있다.
BrowserRouter - HTML5를 지원하는 브라우저의 주소 변화를 감지
HashRouter - 해시(#) 주소 변화를 감지
사용하기 위해서는 다음과 같이 import를 해야 한다.
Router를 원하는 컴포넌트에 다음과 같이 설정한다.
사용을 위해서 다음과 같이 import를 해야 한다.
Router 설정을 마쳤다면 Router로 이동할 수 있는 Link 설정을 해야 한다.
Router 이동 시 a 태그가 아닌 Link 태그로 설정해야 한다.
React Router 5.1.0 버전 이하, React 16.8 버전 이하인 경우 useHistory hook을 사용할 수 있다. 이를 이용하여 프로그래밍 적으로 라우터 이동이 가능하다.
React Router 6 이상에서 사용 가능한 페이지 전환 명령이다.
의존성 설치는 을 이용한다. 프로젝트 폴더에서 다음과 같이 작성한다.