React에서 페이지 이동
일반적으로 HTML에서는 페이지를 이동할 때 <a> 태그에 href를 이용하여 이동합니다.
하지만 React의 JSX에서는 Link 컴포넌트를 이용하여 페이지 이동을 구현합니다.
<a>태그가 href속성으로 이동 경로를 지정한다면, <Link> 컴포넌트는 to속성으로 prop을 통해 이동할 경로를 지정합니다.
react-router-dom 설치
React 프로젝트가 위치한 경로에서 react-router-dom 라이브러리를 추가합니다.
1
$ npm install react-router-dom
Link import
JSX에서 <Link>컴포넌트를 사용하기 위해 react-router-dom에 Link를 import합니다.
1
import { Link } from "react-router-dom"
Link 컴포넌트
아래 예제와 같이 <Link>태그를 이용하여 이동할 JS파일을 지정합니다.
1
2
3
<Link to="./target/location/targetfile.js">
<Button>페이지 이동</Button>
</Link>