[리액트] 라우터 적용하기

//라우터 관련 라이브러리 설치
yarn add react-router-dom

//BrowserRouter 불러오기
import { BrowserRouter } from 'react-router-dom'; 

//index.js
ReactDOM.render(
//BrowserRouter컴포넌트로 묶어주기
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

 

Route: 특정 주소에 컴포넌트 연결하기

<Route path="주소규칙" component={보여주고싶은 컴포넌트}>

 

Link: 누르면 다른 주소로 이동시키기

- 리액트 라우터를 사용할 때 a태그 사용금지

- a 태그의 기본적인 속성은 페이지를 이동시키면서, 페이지를 아예 새로 불러오는 것이다.  a 태그의 속성때문에 앱이 지니고있는 상태들도 초기화되고, 렌더링된 컴포넌트도 모두 사라지고 새로 렌더링을 하게된다.

- Link :  HTML5 History API 를 사용하여 브라우저의 주소만 바꿀뿐 페이지를 새로 불러오지 않는다.