Post List

2016년 10월 21일 금요일

react-router-tutorial #04 nested routes

react-router의 nested routes를 알아보자.

예제를 위하여 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 내용이 뜬다.

드디어 이 예제의 뜻도 확인했다. 그 다음으로 가보자...

참조 URL : 04-nested-routes