React에서 페이지 이동하는 법
라우팅이란 사용자가 요청한 URL에 따라 요청한 URL에 맞는 페이지를 보여주는 것이다 . React에서는 리액트 라우터를 많이 쓴다.
리액트는 SPA방식이고 기존 웹 페이지처럼 새로윤 웹페이지를 사용하는게 아니고 페이지를 로드하지 않고 필요한 데이터를 가져온다! url에 따라 선택된 데이터를 페이지에 렌더링 해준다.
설치방법
-사용하기전 라이브러리 설치 방법
터미널에 npm install react-router-dom 이라고 작성하면 설치 완료이다!
yarn의 경우 yarn add react-router-dom 이라고 작성하면 된다!
Router 사용
- 태그로 컴포넌트를 감싸준다
- , 컴포넌트를 사용한다
- 여기서 는 path와 element 두가지 속성을 가지고 있는데
path는 경로를 만들어주고 element는 해당하는것을 띄어준다 / 컴포넌트를 넣어 많이 사용한다 . path 경로에 *를 넣어 사용하면 만들어준 경로를 제외하고 모든 경로로 된다
- 를 사용한다
- 원래 웹 페이지 링크를 보요줄 때 a태그를 사용하였는데 새로운 페이지를 불러오기때문에 a태그를 사용하지 않는다
- 링크이름 이런식으로 사용한다 Rote path에서 만들어둔 경로를 to=''에 넣어준다
-Link 사용시 import {Link} from 'react-router-dom' 임포트 해준다!
4.사용자가 없는 경로로 접근할 때 에러 페이지로 이동시켜주는 페이지를 만든다 *을 이용
넘어보자