[React] React-Router-Dom 버전v6 _BrowserRouter 와 HashRouter 차이 (2)

 

 

BrowserRouter vs HashRouter

 

둘 다 리엑트가 URL주소에 따라 구성 요소를 매칭하여 렌더링 하기 위한 방법입니다.

 

 

 

 

---

 

 

BrowserRouter

React 는 Single Page Application 입니다.

 

하지만 BrowserRouter는 페이지를 라우팅할 때 URL을 통해 서버의 폴더를 이동하는것 처럼 보여줍니다. 

그래서 Server Side Rendering 처럼 보여지게 됩니다.

(당연히... 실제로 해당 URL에 html 파일이 존재하지 않습니다. SPA 이기 때문에...)

 

 

 

 

 

BrowserRouter 를 사용해서 화면을 렌더링하면 검색엔진에서 봇으로 웹사이트 탐색 시 크롤링이 가능합니다.

(SSR 처럼 보이기 때문입니다.)

 

또한 BrowserRouter 는 JS의 History API 를 사용하기 때문에 IE 9이하는 지원하지 않습니다.

 

 

 

 

---

 

 

HashRouter 

HashRouter 는 URL주소에 #값을 넣어 표시합니다.

 

 

주소상의 #은 (fragment identifier) 내부링크 기능을 합니다.

 

# 으로 라우팅하는 것은 서버의 폴더를 이동하는 방식과는 전혀 다릅니다.

따라서 봇을 통한 크롤링이 불가능해져서 SEO (search engine optimization 검색엔진 최적화)에 악영향을 미칩니다.

 

장점은.. HashRouter는 레거시 브라우저에서도 작동이 가능합니다.

 

 

 

 

+ 추가)

#

 

#은 브라우저에서 리로딩 없이 자바스크립트를 불러오기 위한 방법이면서 

동시에 URL을 브라우저 히스토리에 남깁니다.

 

 

마침 포스팅하고있는 제 주소에도 # 이 있군요!

 

 

 

예를들어, http://twitter.com/# 을 방문한 다음 http://twitter.com/#!/search/twitter 링크를 클릭하면

이 URL은 (#이 있으므로) 서버로 요청이 전송되지 않습니다.

 

 

그러나 URL이 변경되면 onChange 자바스크립트를 호출 할 수 있습니다

그 후에 서버로 요청이 넘어가는 것입니다.

 

 

더 자세한 설명은 밑의 블로그를 참고하시면 됩니다.

(http://mkseo.pe.kr/blog/?p=2269)