[ReactJS]리액트 react-router-dom / HashRouter, BrowserRouter, Route, Switch, Link

리액트 react-router-dom의 사용법에 대해 간단히 알아본다.
react-router-dom 패키지는 SPA을 구현할 때 사용 되어 지며 다음과 같은 패키지들은 용도를 구분하여 사용한다.
- react-router 웹 & 앱
- react-router-dom 웹
- react-router-native 앱

react-router-dom 

우선 react-router-dom을 설치한다.

npm install react-router-dom

 

완료 후 App.js에 BrowserRouter, Route, Switch, Link를 import 한다.

import {BrowserRouter, Route, Switch, Link} from "react-router-dom"

 

BrowserRouter, HashRouter, Route, Switch, Link은 다음과 같은 기능을 가진다.

BrowserRouter

- HTML5의 history API를 활용하여 URL과 UI를 동기화 하는 라우터.

 

HashRouter

- URL의 hash(#)를 활용한 라우터, 정적인 페이지에 적합하다. URL 주소에 #가 붙는다.

- 검색엔진으로 못 읽는 단점 때문에 거의 사용하지 않는다.

 

Route

- 요청받은 pathname에 해당하는 컴포넌트를 렌더링한다.

 

Switch

- 자식 컴포넌트 Route또는 Redirect중 pathname에 해당하는 첫번째 컴포넌트를 렌더링한다.

- BrowserRouter만 사용할 때와 다르게 매칭되는 하나의 요소만 렌더링한다.

 

Link

- 'a' 태그와 비슷, to 속성에 설정된 링크로 이동한다. 기록이 history 스택에 저장된다.

 

 

import React from "react";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import Home from "routes/Home";
import Profile from "routes/Profile";
import Page from "routes/Page";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/profile">Profile</Link>
          </li>
          <li>
            <Link to="/page">Page</Link>
          </li>
        </ul>
      </nav>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route>
          <Profile />
        </Route>
        <Route>
          <Page />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

 

참고

reactrouter.com/web/guides/quick-start

React Router: Declarative Routing for React

velog.io/@kwonh/React-react-router-dom-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[React] react-router-dom 시작하기