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

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

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

• react-router : 웹 & 앱
• react-router-dom : 웹
• react-router-native : 앱

공식 참고 문서 : 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;

• BrowserRouter - URL과 UI를 동기화해주는 라우터이며, 웹 어플리케이션이 History API를 사용하여 페이지를 새로고침 없이 주소 변경이 가능하게 하고, 관련된 정보를 props로 쉽게 조회하거나 이용할 수 있게 해줍니다.

• HashRouter - URL에 #가 붙는 방식의 Router

• Route - Route태그의 path는 매칭을 기다리는 url이며, 매칭되면 컴포넌트를 렌더링합니다.

  Switch 를 사용하는 경우 Route는 위에서 부터 아래로 먼저 맞는 경로가 있을 경우에 보여주기 때문에 Router(Switch)내부에 있는 Route의 순서를 신경 써서 작성해야 합니다.

  이유는 Switch가 여러 개의 Route중에서 하나만 고르기 때문이다. 그렇다면 특정 url의 Route를 나오게 하고 싶다면 어떻게 해야 할까.

  정확한 링크일 때만 보여주는 exact를 사용하면 된다.

  path: string | string[]

  <Route path="/users/:id">
    <User />
  </Route>
  

  <Route path={["/users/:id", "/profile/:id"]}>
    <User />
  </Route>