라우터란 패킷의 위치를 추출하여, 그 위치에 대한 최적의 경로를지정하며, 이 경로를 따라 데이터 패킷을 다음 장치로 전행시키는 장치이다. 즉 화면과 화면을 연결 시켜주고 이동을 시켜주는 장치라고 이해하면 됩니다.

SPA앱을 만들 때 많이 사용되는 reat-router-dom 패키지에 대해 알아보겠습니다.

다음 세 가지 패키지는 각각 용도가 다릅니다.

공식 참고 문서 : reactrouter.com

설치

$ npm i react-router-dom *// JavaScript 형식*
$ npm i @types/react-router-dom *// TypeScript 형식*

불러오기

import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
// Router.tsx
function Router() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/:coinId" >
          <Coin />
        </Route>
        <Route path="/" >
          <Coins />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default Router;