Fail Setting: react-router-tutorial #12 navigating

이번 예제를 위하여 12-navigating 디렉토리로 이동 후 npm install을 실행하자.
이번에는 링크를 따라 움직이다 입력을 한 후 버튼을 클릭할 경우 응답을 하는 부분을 구현해본다.

1. modules 밑에 Repos.js 파일에 대하여 아래와 같이 구현한다.

[binrang@binrang modules]$ pwd

/home/binrang/react/react-router-tutorial/lessons/12-navigating/modules

[binrang@binrang modules]$ vi Repos.js 

import React from 'react'

import NavLink from './NavLink'

export default React.createClass({

  // context 에서 router 에 요청하는 부분.
  contextTypes: {
    router: React.PropTypes.object
  },

  // 이 부분에 메소드를 추가한다.

  handleSubmit(event) {

    event.preventDefault()

    const userName = event.target.elements[0].value

    const repo = event.target.elements[1].value

    const path = `/repos/${userName}/${repo}`

    console.log(path)
    this.context.router.push(path)

  },

  render() {

    return (

      <div>

        <h2>Repos</h2>

        <ul>

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

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

          {/* 여기에 폼 을 구현한다.  */}

          <li>

            <form onSubmit={this.handleSubmit}>

              <input type="text" placeholder="userName"/> / {' '}

              <input type="text" placeholder="repo"/>{' '}

              <button type="submit">Go</button>

            </form>

          </li>

        </ul>

        {this.props.children}

      </div>

    )

  }

})

2. Repo.js 파일을 수정한다.

import React from 'react'

export default React.createClass({

  render() {

    const { userName, repoName } = this.props.params

    return (

      <div>

        <h2>{userName} / {repoName}</h2>

      </div>

    )

  }

})