07. Router

React Router 를 이용하여 SPA routing 을 구현합니다.

들어가기전에

SPA routing 에 대한 설명은 여기 에서 확인해주세요

실습

프로젝트는 초기 세팅 상태로 진행되어집니다. +@ 로 이제는 styled-component 를 이용하기 때문에 App.css 파일이 필요없습니다.

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

$ npm install --save react-router-dom

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

// src/pages/home.js

import React from 'react'

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

export default Home

// src/pages/signin.js

import React from 'react'

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

export default SignIn

// src/pages/signup.js

import React from 'react'

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

export default SignUp

// 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 이 이루어진다는게 다릅니다 .

// 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 들을 설정합니다.

// 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 만 보여줍니다.