Fail Setting: react-router-tutorial #06 params

이번 예제는 파라미터에 대하여 진행을 한다.

예제를 위하여 06-params 디렉토리로 이동하고 npm install을 실행한다.

이번 예제에서는 두 개의 URL을 추가할 것이다.

>

/repos/reactjs/react-router

/repos/facebook/react

첫번째로 아래 파일을 추가한다.

[binrang@binrang modules]$ pwd

/home/binrang/react/react-router-tutorial/lessons/06-params/modules

[binrang@binrang modules]$ vi Repo.js 

import React from 'react'

export default React.createClass({

  render() {

    return (

      <div>

        <h2>{this.props.params.repoName}</h2>

      </div>

    )

  }

})

그 다음 파일은 index.js 파일을 수정하는데 이 예제의 루트에 위치한다.

[binrang@binrang 06-params]$ pwd

/home/binrang/react/react-router-tutorial/lessons/06-params

[binrang@binrang 06-params]$ 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'

render((

  <Router history={hashHistory}>

    <Route path="/" component={App}>

      <Route path="/repos" component={Repos}/>

      <Route path="/about" component={About}/>

    </Route>

  </Router>

), document.getElementById('app'))

이 파일을 아래와 같이 수정한다. 새로운 route를 추가하는 것이다.

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

import Repo from './modules/Repo'

render((

  <Router history={hashHistory}>

    <Route path="/" component={App}>

      <Route path="/repos" component={Repos}/>

      {/* add the new route */}

      <Route path="/repos/:userName/:repoName" component={Repo}/>

      <Route path="/about" component={About}/>

    </Route>

  </Router>

), document.getElementById('app'))

이번에는 Repos.js 파일을 손 보자.

import React from 'react'

// Add import 

import { Link } from 'react-router'

export default React.createClass({

  render() {

    return (

      <div>

        <h2>Repos</h2>

        {/* add some links */}

        <ul>

          <li><Link to="/repos/reactjs/react-router">React Router</Link></li>

          <li><Link to="/repos/facebook/react">React</Link></li>

        </ul>

      </div>

    )

  }

})