<aside> 💡 리액트에서 페이지간에 연결할때 쓰는 HashRouter 혹은, BrowserRouter에 대해 배워보자.

</aside>

React파일은 여러 페이지들을 포함하고 있고, 버튼을 클릭시에, 원하는 페이지로 보낼수 있어야 한다. HTML처럼 <a>태그를 쓴다면, 모든페이지가 다시 리로드 되는 불상사가 생긴다. 즉, 리액트의 SPA(Single-Page Application)장점이 모두 사라지는 것이다.

그러므로 우리는 이러한 문제를 해결하기 위해서 HashRouter 혹은, BrowserRouter 를 쓰게 된다. 이 두가지의 Router는 모두 'react-router-dom'에서 import해서 쓸 수 있다.

React Router: BrowserRouter

BrowserRouter의 주요 컴포넌트

<BrowserRouter>, <Switch>, <Route>, <Link>

그러므로 우리는 필요한 페이지에서 각각 아래의 방식으로 불러 올 것이다.

import {BrowserRouter, Switch, Route, Link} from 'react-router-dom'
//이를 불러 오기 전에 당연히 미리 react-router-dom설치가 선행 되어야 한다.
//npm install react-router-dom

BrowserRouter의 주요 컴포넌트의 분류

  1. Router = BrowserRouter
  2. Route Matcher = Switch, Route
  3. Route Changer = Link

BrowserRouter

BrowserRouter가 웹 애플리케이션에서 HTML5의 History API를 사용해 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할을 해준다. 즉, SPA구현하는 것의 가장 중심이다. 이 BrowserRouter가 상위컴포넌트로 존재해야만 Route를 사용할 수 있다.