Post List

2016년 10월 24일 월요일

react-router-tutorial #07 more nesting

이번에는 좀 더 나아가보자. 07-more-nesting 디렉토리로 이동하고 npm install을 실행해 놓자.

기존 예제에서는 한번의 서브 형태의 액티브한 페이지를 구성했는데 이번에는 한 번 더 서브 형태의 페이지를 구성하는 것이다.

1. index.js 파일을 수정해 보자.



[binrang@binrang 07-more-nesting]$ pwd
/home/binrang/react/react-router-tutorial/lessons/07-more-nesting
[binrang@binrang 07-more-nesting]$ vi 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'
import Repo from './modules/Repo'
render((
  <Router history={hashHistory}>
    <Route path="/" component={App}>
      {/* Route 에 대하여 열고 닫는 부분을 수정 */}
      <Route path="/repos" component={Repos}>
        <Route path="/repos/:userName/:repoName" component={Repo}/>
      </Route>
      <Route path="/about" component={About}/>
    </Route>
  </Router>
), document.getElementById('app'))

2. Repos.js 파일을 수정하자.

[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/07-more-nesting/modules
[binrang@binrang modules]$ vi Repos.js 
import React from 'react'
import { Link } from 'react-router'
export default React.createClass({
  render() {
    return (
      <div>
        <h2>Repos</h2>
        <ul>
          <li><Link to="/repos/reactjs/react-router">React Router</Link></li>
          <li><Link to="/repos/facebook/react">React</Link></li>
        </ul>
        {/* 아래와 같이 추가 */}
        {this.props.children}
      </div>
    )
  }
})

3. Repos.js에 Link를 active class를 이용한 NavLink로 바꾼다.

[binrang@binrang modules]$ pwd
/home/binrang/react/react-router-tutorial/lessons/07-more-nesting/modules
[binrang@binrang modules]$ vi Repos.js 
import React from 'react'
// 이 부분의 Link를 NavLink로 바꾼다.
import NavLink from './NavLink'
export default React.createClass({
  render() {
    return (
      <div>
        <h2>Repos</h2>
        <ul>
          {/* 이 부분의 Link를 LavLink로 바꾼다. */}
          <li><NavLink to="/repos/reactjs/react-router">React Router</NavLink></li>
          <li><NavLink to="/repos/facebook/react">React</NavLink></li>
        </ul>
        {/* 아래와 같이 추가 */}
        {this.props.children}
      </div>
    )
  }
})

4. npm start를 한 후 브라우저를 열고 확인해 보자.
홈은 익숙하다.

About도 익숙하다.

06 예제와 비슷

드뎌 액티브하게 아래에 화면을 나온다.

React를 클릭하면 아래에 react가 active하게 뜬다.

드디어 이 예제가 뜻하는 바를 이루었다.

참조 URL : 07-more-nesting