React Router

React Router

• 종류
  • react-router-dom: web에서 사용
  • react-router-native: app에서 사용
  • react-router: web과 app 둘 다 사용

HashRouter vs BrowserRouter

1. BrowserRouter

   • HTML5의 history API를 활용해서 UI를 업데이트
   • 동적인 페이지에 적합

2. HashRouter

   • URL의 hash를 활용한 라우터
   • 주소에 #가 붙어서 검색엔진으로 읽지 못함
   • 정적인 페이지에 적합

React Router Dom

• 설치
  npm i react-router-dom

  • typescript에서 react-router-dom을 사용하려면 별도의 package를 설치해야 함
    npm i @types/react-router-dom

• Router사용 예시

    import { BrowserRouter as Router, Route, Switch } from “react-router-dom”;

    <Router>
      <Switch>
        <Route path="/cafe" exact>
          <Cafe />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>

https://reactrouter.com/web/guides/quick-start
https://worker-k.tistory.com/entry/React-BrowserRouter%EC%99%80-HashRouter%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-%EC%A0%95%EB%A6%AC