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
댓글 없음:
댓글 쓰기