Post List

2016년 10월 24일 월요일

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>
    )
  }
})

npm start를 하고 브라우저를 학인하면 아래와 같이 확인할 수 있다.

홈화면은 이제 익숙하네..

About는 변화 없다.

Repos를 클릭하니 페이지가 달라진다.

repoName 파라미터가 react-router로 표시가 된다.

repoName 파라미터가 react로 표시된다. 

참고 URL : 06-params