$$config title: [React] 리액트 라우터란? keywords: - react - front $$ # React Router란? - 여러 화면으로 구성된 웹 어플리케이션을 만드는 라이브러리이다.
- 리액트는 싱글페이지 어플리케이션을 만들 수 있도록 하는 라이브러리인데, - 각 페이지를 북마크 할 수 없음 - 브라우저 상에서 뒤로가기, 앞으로 가기와 같은 내비게이션 사용 불가 - 라는 단점이 있어 , 이를 보완하기 위해 화면들에 따라 주소를 각각 만들어, 다른 주소에 다른 뷰를 보여주는 리액트 라우터를 사용한다. # (1) 설치 `npm i react-router-dom` - 을 터미널 창에 입력해 설치한다. ? 현재 최신버전이 6버전이라 자동으로 6버전이 설치되는데, 6버전을 설치하고 적용해보니 실행이 되지 않는 문제점이 있어 uninstall 후 5버전으로 새로 설치하여 사용했다 ! @@-> 잘됨 !! 방법 : npm i react-router-dom@5 라고 입력하면 5버전 설치 됨 # (2) 라우터 사용 - App.js 의 최상단에 react-router-dom 을 import해야한다. ``import { BrowserRouter, Route, Switch } from "react-router-dom";``
- 아래 라우팅을 할 컴포넌트에 ```js // path 안에 url 경로 작성 // url 사용할 컴포넌트를 자식요소로 넣어준다. ``` # (3) 주의사항 - path에 사용할 url을 입력 후, exact 를 꼭 입력해주어야한다. ```js <출력할 컴포넌트 /> ``` - exact 의 의미는 정확히 이 path에서만 해당 라우팅이 이루어지도록 하라는 명령이다. - 원래는 ``exact={true}`` 가 맞지만, true는 생략 가능! - exact를 사용하지않으면, ``home(localhost : 3000)`` 에서는 ``home`` 컴포넌트만 잘 뜨지만, - ``다른 url을 입력한 주소(localhost : 3000/url)`` 에서는 그 컴포넌트와 ``home`` 컴포넌트가 동시에 뜸 ( / 둘다 슬래시가 포함되어있기 때문에 ..) # 참고자료 [참고 사이트](https://velog.io/@wiostz98kr/TIL49-l-React-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9A%B0%ED%84%B0React-Router-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-Feat.-SPA) [라우터 사용 방법](https://han-py.tistory.com/433)