React - React Router

React Router

• React의 SPA 환경에서 라우팅을 할 수 있도록 돕는 네비게이션 라이브러리.
• SPA의 장점은 유지하면서도, Component간의 엔드포인트 변경도 이루어지기 때문에 매우 유용하다.
• location, history 같은 내장 API와도 완벽하게 연동된다.
• React Router에는 web 용 라이브러리와 Native용 라이브러리가 따로 존재한다. 그 중 Web용 라이브러리인 'react-router-dom'은 아래 명령어로 React 프로젝트에 설치할 수 있다.

$ npm i react-router-dom

---

활용방법

import React from "react";
import { Link, Route, BrowserRouter as Router } from "react-router-dom";
import Home from "./Home";
import About from "./About";

function App() {
  return (
    <Router>
      <header>
        <Link to="/">
          <button>Home</button>
        </Link>
        <Link to="/about">
          <button>About</button>
        </Link>
        <Link to="/users">
          <button>Users</button>
        </Link>
      </header>
      <hr />
      <main>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </main>
    </Router>
  )
};

• BrowserRouter : HTML5의 history API를 활용하여 UI를 업데이트, 동적인 페이지에 많이 쓰인다. (cf.HashRouter : URL의 hash를 활용한 라우터, 정적인(static)페이지에 적합.)
• Link : html의 a태그와 유사한 기능의 component. to를 통해서 이동할 경로를 지정한다. 해당 component를 활용하면 특정 버튼을 눌렀을 때 해당 경로로 URL이 갱신된다.
• Route :현재 주소창의 경로와 매칭될 경우 보여줄 component를 지정하는데 활용되는 component. path를 통해 경로를 지정하고, component를 통해 매치 시 표시되는 component를 지정한다.
• Router : link component와 Route component를 묶어주는데 사용된다. 반드시 묶여있어야 Link와 Route가 정상적으로 작동한다.