React Router에 관하여

import {HashRouter, Route, Switch} from "react-router-dom";

 

의 각 개념에 대해 알아보자.

 

출처: https://seungdols.tistory.com/769

 

Hash Router

:

react-router-dom은 단일 페이지 앱의 내비게이션 이력을 관리할 수 있는 다양한 방법을 제공한다.

HashRouter는 클라이언트를 위해 설계된 라우터이며,

Hash는 <a href="#">의 #를 뜻한다.

 

주소창의 현재 페이지 경로 뒤에 #를 입력하면, 브라우저는 서버요청을 보내지 않고, 현재 페이지에서 식별자에 해당하는 엘리먼트를 찾아서 위치를 보여준다.

즉, HashRouter를 사용하면 모든 경로앞에 #를 붙여서 서버요청을 보내지 않게 해준다.

HashRouter는 백엔드를 사용하지 않는 작은 클라이언트 사이트를 만들 때 유용하다? 고 한다.

 

Switch

:

Switch는 하위 태그인 Route에서 경로가 일치하는 것을 렌더링한다.

즉, Switch태그 하위에 Route가 여러개 존재할 수 있다.

 

ex)

<HashRouter>

 <Switch>

  <Route exact path="/">

  <Route path="/events">

 </Switch>

</HashRouter>