예제를 위하여 04-nested-routes 디렉토리로 이동하고 npm install 역시 실행 해 둔다.
이번 예제의 타겟은 아래와 같다.
1. index.js 파일에 대해서 수정한다.
아래와 같이 구현을 진행하였는데...
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Router>
), document.getElementById('app'))
|
이 파일을 다음과 같이 수정한다.
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, hashHistory } from 'react-router'
import App from './modules/App'
import About from './modules/About'
import Repos from './modules/Repos'
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('app'))
|
자세히 보면 App의 Route에 대하여 Repos와 About를 포함하는 태그로 구성되었다.
2. 이번에는 modules 밑에 있는 App.js 파일을 수정한다.
[binrang@binrang 04-nested-routes]$ cd modules/
[binrang@binrang modules]$ vi App.js
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
</div>
)
}
})
|
이 부분을 아래와 같이 추가한다.
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
render() {
return (
<div>
<h1>React Router Tutorial</h1>
<ul role="nav">
<li><Link to="/about">About</Link></li>
<li><Link to="/repos">Repos</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
|
this.props.children 이라는 속성이 이번 타겟이다.
이렇게 수정 후 npm start 를 해 보고 브라우저를 확인해보자.
 |
| 홈 화면은 03 예제에서 본 화면이다. |
 |
| 아하! About를 클릭하니 아래에 화면이 뜬다. |
 |
| Repos를 클릭하면 아래에 Repos 내용이 뜬다. |
드디어 이 예제의 뜻도 확인했다. 그 다음으로 가보자...
댓글 없음:
댓글 쓰기