Post List

2016년 10월 24일 월요일

react-router-tutorial #08 index routes

이번 예제는 / 로 접속했을 때 네비게이션에 Home 이라고 반응하는 것을 구현하는 것이다.

08-index-routes 디렉토리로 이동을 한 후 npm install을 미리 실행하여 놓는다.

1. modules/Home.js 파일을 생성하고 아래 코드를 구현한다.



[binrang@binrang modules]$ ls -al
합계 24
drwxrwxr-x. 2 binrang binrang   80 10월 21 14:22 .
drwxrwxr-x. 3 binrang binrang 4096 10월 21 14:22 ..
-rw-rw-r--. 1 binrang binrang  110 10월 21 14:22 About.js
-rw-rw-r--. 1 binrang binrang  377 10월 21 14:22 App.js
-rw-rw-r--. 1 binrang binrang  200 10월 21 14:22 NavLink.js
-rw-rw-r--. 1 binrang binrang  172 10월 21 14:22 Repo.js
-rw-rw-r--. 1 binrang binrang  393 10월 21 14:22 Repos.js
[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/08-index-routes/modules
[binrang@binrang modules]$ vi Home.js
import React from 'react'
export default React.createClass({
  render() {
    return <div>Home</div>
  }
})


2. index.js 파일을 수정한다.

[binrang@binrang 08-index-routes]$ pwd
/home/binrang/react/react-router-tutorial/lessons/08-index-routes
[binrang@binrang 08-index-routes]$ vi index.js
import React from 'react'
import { render } from 'react-dom'
// IndexRoute 를 추가한다.
import { Router, Route, hashHistory, IndexRoute } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
import Repo from './modules/Repo'
// Home 모듈을 추가한다.
import Home from './modules/Home'
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      {/* 이 부분에 IndexRoute 를 추가한다. */}
      <IndexRoute component={Home}/>
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo}/>
      </Route>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

이제 npm start를 하고 브라우저로 아래 화면이 나오는지 체크 해본다.

이번 홈은 / 에 반응하여 Home 이라는 Text를 뿌린다.

Home이라는 텍스트가 사라지고 원래 화면이 나온다.

이 화면은 이전 예제와 같다.

여기까지가 이번 예제가 이야기하는 부분이다.

참고 URL : 08-index-routes