[React Router] 02. Rendering a Router

React Router

02. Rendering a Router

예제 소스코드 : https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route

---

React Router는 Component이다.

기본적으로 예시에 사용되는 index.html은 다음과 같다.

webpack을 통해 index.js-> bundle.js로 패키징된다. 

우선 index.html에 사용될 Component를 가지는 index.js에

1. import Router, Route

2. render Router

2가지 작업을 추가한다.

// ...
import { Router, Route, hashHistory } from 'react-router'

render((
 
    

), document.getElementById('app'))

Adding More Screens

---

위 예시에는 root path('/')에 해당되는 Component만 존재한다. 

여러개의 화면을 Route하기 위해서 새로운 화면(Component) 2개를 생성한다. 

 - modules/About.js

 - modules/Repos.js

// modules/About.js
import React from 'react'

export default React.createClass({
  render() {
    return 
About
  }
})

// modules/Repos.js
import React from 'react'

export default React.createClass({
  render() {
    return 
Repos
  }
})

생성 한 2개의 Componenet를 Router(index.js)에 추가시키면 된다.

import About from './modules/About' // About Component
import Repos from './modules/Repos'

render((
  
    
    {/* add the routes here */}
    
    
  
), document.getElementById('app'))

위 코드를 실행시키면 

http://localhost:8080/repos  -> Repos Component

http://localhost:8080/about -> About Component

각 경로에 따라 해당 Component를 출력해준다.