[Router] React Router 사용하기

여러 페이지가 있는 싱글 페이지 애플리케이션에서 (SPA)

 

현재 페이지에서 다른 페이지의 이동을 하기 위해

 

사용하는 필요한 라이브러리 입니다.

 

---

 

1. 설치

 

설치 방법은 아래와 같은 코드를 입력

 

npm install react-router-dom

 

 

또는 해당 링크를 누른 후 따라하시면 됩니다.

 

---

 

2. 사용방법

 

크게 두 가지로 아래와 같이 나누어 지는 거 같습니다.

 

- BrowerRouter

 

import { BrowserRouter } from 'react-router-dom'

 

 

- HashRouter

import { HashRouter } from 'react-router-dom'

 

 

차이점은 사이트에 접속했을 때,

 

해쉬태그 # 

 

유무 입니다.

 

또 필요한 기능이 아래와 같습니다.

 

-Route

 

해당 페이지에 접속할 수 있도록 Path 설정을 해주는 곳입니다.

 

import { BrowserRouter as Router, Route } from 'react-router-dom'

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

 

---

 

3. 응용 (Composition 사용하기) 

 

<Route path="/home" render={() => <div>Home</div>}/>

 

 

두 개 이상의 Route를 동시에 랜더링 하는 방식인데

 

exact 가 없어져야 실행이 잘 되었습니다.

 

---

 

4. 리다이렉트

 

잘못된 주소를 입력하거나 없는 URL이 입력 되었을 때,

 

원래 페이지로 돌아갈 수 있도록 도와주는 것이라고 생각하면 됩니다.

 

 

import { Route, Redirect } from 'react-router'

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

 

 

위의 예시는 로그인이 정상적으로 이루어지면, 

 

dashboard로 페이지가 넘어가고

 

그렇지 않다면, PublicHomePage로 가게 됩니다.

 

그 외에, 많은 기능들이 있습니다.

 

앞에 있던 링크를 여기에 다시 올려 놓았으니, 필요할 때 마다 꼭 보셨으면 좋겠습니다.

 

 

React Router: Declarative Routing for React