221213_TIL

BrowserRouter

참고사이트
React Router는 라이브러리다.
여러 화면으로 구성된 웹 어플리케이션을 만드는 데 사용된다.
클라이언트 사이드에서 이루어지는 라우팅을 간단하게 해주며, 서버 사이드 렌더링을 도와주는 도구들도 같이 제공된다.
이는 React-Native에서도 사용할 수 있음.

설치하기

npm install react-router-dom (웹개발)
npm install react-router-native (리액트 네이티브 개발 모듈)

기능
BrowserRouter는 HTML5의 History API(pushState, replaceState, popState event)를 사용하여 URL과 UI를 동기해주는 <Router>이다.

⭐️ 페이지를 새로고침하지 않고도 주소를 변경할 수 있도록 해줌. 현재 주소에 관련된 정보를 props로 조회 및 사용이 가능하도록 한다. ⭐️

최상위 컴포넌트를 감싸주는 Wrapper Component이기 때문에, App 컴포넌트를 감싸주도록 하자.

코드에 적용한다면?

import {Route} from 'react-router';

<Route path="/이동할 주소">
  <출력할 컴포넌트 / >
<Route/>

• 주소를 여러개 지정한다면, path={ [ '/home', '/profile' ] } 처럼 경로 배열을 지정한다.
  배열은 JS코드이므로, {}로 묶어주는 것 잊지말기!