通过程序进行导航

大多数的导航都是用Link实现的，但是伴随着表单的提交、按钮的点击也可以通过程序进行导航。我们在Boys.js中制作一个简单的表单:

import React from 'react'
import NavLink from './NavLink'

export default React.createClass({
  // add this method
  handleSubmit(event) {
    event.preventDefault()
    const boyName = event.target.elements[0].value
    const path = `/repos/${boyName}`
    console.log(path)
  },

  render() {
    return (
      <div>
        <h2>我的男神们：</h2>
        <ul>
          <li><NavLink to="/boys/宋仲基">宋仲基</Link></li>
          <li><NavLink to="/boys/吴亦凡">吴亦凡</Link></li>
          <li>
            <form onSubmit={this.handleSubmit}>
              <input type="text" placeholder="boyName"/> / {' '}
              <button type="submit">Go</button>
            </form>
          </li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})

点击提交按钮后会触发handleSubmit方法，在handleSubmit方法中，会得到路径path，上面的的代码只是把path记录到日志中

想要把你输入的男神姓名打印在网页上，可以利用Router提供的context实现：首先从组件的上下文context中请求router，再将路径push到router中。更改上面的代码：

export default React.createClass({
  // ask for `router` from context
  contextTypes: {
    router: React.PropTypes.object
  },
  // ...
  handleSubmit(event) {
    // ...
    this.context.router.push(path)
  },
  // ..
})

打包运行再试试吧：在输入框中输入你喜欢的男神名字：李易峰、杨洋、鹿晗、胡歌、霍建华、吴磊等等，只要你输入，就可以看到他们了。