• 목차

패키지 설치

React 앱을 클라이언트 환경에서 라우팅 하기 위한 라이브러리로 React Router를 사용합니다.

npm i [email protected]

React Router

Basic Installation

라우터 연결

클라이언트 사이드 라우팅은 BrowserRouter 컴포넌트를 불러와 앱을 감싸는 것에서 시작합니다.

src/index.js

import 'styles/index.css';
import { StrictMode } from 'react';
import { render } from 'react-dom';
import WireframeApp from 'wireframe/App';
**import { BrowserRouter as Router } from 'react-router-dom';**

/* -------------------------------------------------------------------------- */

render(
  <StrictMode>
    **<Router>**
      <WireframeApp />
    **</Router>**
  </StrictMode>,
  document.getElementById('root')
);

<aside> ☝ HashRouter를 사용하면 HTML5 History API 대신, 해시(#)를 사용해 라우팅 합니다.

</aside>

React Router

BrowserRouter 컴포넌트

내비게이션 링크 설정

애플리케이션을 탐색할 수 있도록 NavLink 컴포넌트를 불러와 사용합니다. (to, className prop 설정)

src/components/Navigation/Navigation.js