Home React에서 페이지를 이동하는 방법
Post
Cancel

React에서 페이지를 이동하는 방법

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

JSX에서 <Link>컴포넌트를 사용하기 위해 react-router-dom에 Link를 import합니다.

1
import { Link } from "react-router-dom"

아래 예제와 같이 <Link>태그를 이용하여 이동할 JS파일을 지정합니다.

1
2
3
<Link to="./target/location/targetfile.js">
  <Button>페이지 이동</Button>
</Link>
This post is licensed under CC BY 4.0 by the author.