React-Router

route

• $ yarn add react-route-dom

• import { Switch, Route, BrowserRouter } from  'react-router-dom';
  
  // BrowserRouter : 사용하겠다고 감싸주는 선언.
  <BrowserRouter>
    <Switch>
      <Route  path="/bar/:id">
        <Bar  />
      </Route>
      <Route  path="/foo">
        <Foo  />
      </Route>
      <Route  path="/">404 페이지</Route>
    </Switch>
  </BrowserRouter>

• 리액트는 클라이언트 서버 렌더링이다.
  리액트에서 클라이언트 서버 렌더링을 하기 위해서는 react-route-dom이라는 모듈이 필요하다.
  $ yarn add react-route-dom명령어를 이용해 설치 가능하다.

• pages 또는 routes라는 폴더 속에 라우터로 연결할 컴포넌트 작성.

• 컴포넌트를 분기함으로써 좀더 편리하게 반복해서 사용 가능.

• next.js나 Gatsby.js 라이브러리를 사용하면 리액트 라우팅 필요없이 pages 안에 있는 파일을 알아서 라우터로 인식해서 사용하기 편하게 해준다. (별도의 분기 처리가 필요없어지는 것)