# 07. Router

### 들어가기전에 

SPA routing 에 대한 설명은 [여기](https://simplevue.gitbook.io/intro/vue.js#spa-single-page-application) 에서 확인해주세요 

### 실습

> 프로젝트는 [초기 세팅 상태](https://simplereact.gitbook.io/simplereact/02.-componet#undefined-1)로 진행되어집니다. +@ 로 이제는 styled-component 를 이용하기 때문에 App.css 파일이 필요없습니다.

먼저 React Router 를 설치해야합니다.

```javascript
$ npm install --save react-router-dom
```

그리고 각 path 별로 보여줄 3개의 페이지를 준비합니다.

```javascript
// src/pages/home.js

import React from 'react'

function Home() {
  return (
      <div> 
        <h1>Home Page</h1> 
      </div>
    )
}

export default Home
```

```javascript
// src/pages/signin.js

import React from 'react'

function SignIn() {
  return (
      <div> 
        <h1>SignIn Page</h1> 
      </div>
    )
}

export default SignIn
```

```javascript
// src/pages/signup.js

import React from 'react'

function SignUp() {
  return (
      <div> 
        <h1>SignUp Page</h1> 
      </div>
    )
}

export default SignUp
```

```javascript
// src/pages/error.js

import React from 'react'

function Error() {
  return (
      <div> 
        <h1>Error Page</h1> 
      </div>
    )
}

export default Error
```

이제 각 링크를 걸어줄 Header Component 를 추가하겠습니다.\
React Router 의 Link 를 이용하여 이동합니다.\
a 태그와 비슷한 역할을 하지만 a 태그는 페이지의 전환이 일어나지만 Link 는 SPA routing 이 이루어진다는게 다릅니다 .

```javascript
// src/components/header.js

import React from 'react'
import { Link } from 'react-router-dom';

function Header() {
    return (
        <div>
            <Link to="/">Home</Link>
            <Link to="/signin">SignIn</Link>
            <Link to="/signup">SignUp</Link>
        </div>
    )
}

export default Header
```

이제 해당 url path 에 따라 보여질 Component 들을 설정합니다.

```javascript
// App.js

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

import Header from './components/header'
import Home from './pages/home'
import SignIn from './pages/signin'
import SignUp from './pages/signup'
import Error from './pages/error'

function App () {
  return (
    <Router>
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/signin" component={SignIn}/>
          <Route path="/signup" component={SignUp}/>
          <Route component={Error}/>
        </Switch>
      </div>
    </Router>
  )
}

export default App
```

* BrowserRouter 로 Router 영역을 감쌉니다.
* Switch 를 이용하여 path 에 따른 component 를 교체합니다
* Route 를 이용하여 path 와 component 를 매칭합니다. (exact  는 정확히 path 가 일치할때만 보여집니다.) 위의 코드에서 exact 가 없다면 모든 path 를 '/' 와 같은 path 로 판단하여 Home Component 만 보여줍니다.&#x20;

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-Lo5doNCqCWa6Kc5EvfI%2F-Lo5oF6V5tr6n5oW-jIB%2Fimage.png?alt=media\&token=6868e023-7586-40ce-9a1d-77cf06509264)