React의 Router

React의 Router

react는 SPA(Single Page Application)과 MPA(Multi Page Application) 중 SPA방식이다.

말 그대로 한 개의 화면으로 구성된 어플리케이션이다.

화면을 전환할 때 다른 화면으로 이동하지 않고 하나의 화면에 콘텐츠 내용만 변경한다.

React-Router는 페이지를 새로 불러오지 않고 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리이다.

 

React에서 대표적으로 HashRouter와 BrowserRouter를 사용한다.

두 Router의 특징을 살펴보자!

 

HashRouter

1. 주소에 해시태그(#)가 붙는다. (www.test.com/#/path)
2. 새로고침해도 에러가 발생하지 않는다.
3. 검색엔진으로 읽지 못한다.(# 때문에)
4. 주로 정적인 페이지에 사용된다.(백엔드 서버가 필요하지 않은 상황)

BrowserRouter

1. <Link> 태그 사용, to 속성에 이동할 경로를 작성한다. <Link to="주소">
2. 새로고침 시 경로를 찾지 못해 에러 발생한다.
3. 주로 동적인 페이지에서 사용된다.
4. History API를 활용한 라우터이다.

 

 

 

참고 

https://m.blog.naver.com/sejun3278/221797203201

https://wonit.tistory.com/299

https://phsun102.tistory.com/71