SearchField.js

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class SearchField extends Component {
  _submit = (event) => {
    event.preventDefault()
    const query = this.refs.query.value
    const path = query.length > 0 ? `/search/${query}` : '/'

    // This is the kicker... it redirects us to /search/foo.
    // We have access to this.props.history because of the `withRouter` at the last line
    this.props.history.push(path)
  }

  render () {
    return <form action='#' onSubmit={this._submit} className='SearchField'>
      <input type='search' name='q' ref='query' placeholder='Search' />
    </form>
  }
}

// LOOK HERE!
export default withRouter(SearchField)