Fail Setting: 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>

    )

  }

})