Routue

4. Routue

• SPA 에서 여러가지 페이지를 만들고 싶을때 사용

설치

• 터미널에서 react-router-dom 라이브러리를 설치하여 사용

npm install react-router-dom

• index.js 설정

import {BrowserRouter,HashRouter} from 'react-router-dom';

.

.

.

<BrowserRouter>

<App/>

</BrowseRouter>

.

.

.

HashRouter VS BrowserRouter

• HashRouter : URL 맨 뒤에 /#/ 이 붙은채로 시작

• BrowserRouter : URL 맨 뒤에 /link 으로 시작

• HashRouter 사용 이유 : URL에 #을 통해 요청되는것은 서버에서 요청을 받아주지않음. 즉, URL을 통해 서버에게 이상한 페이지를 요청하지 않기 위해 사용

사용

<Route path="/경로" component={componentName}> </Rotue>

or

<Route path="/경로"> <Component/> </Route>

특징

• HTML 내부의 네용을 갈아치워서 다른 페이지 처럼 흉내내는것일 뿐, 각각 페이지 마다 다른 HTML을 보여주는것이 아님.

• Path의 경로가 포함될 경우 특별한 설정을 하지 않으면 모든 Component가 보임

• exact 를 사용할 경우 경로가 정확히 일치할 때만 Component를 보여줌

<Route exact path="/home">