title: React Router - Doesn't Automatically Route on Form Submission
body: <p>I'm trying to route my search field to this route:</p>
  
  <blockquote>
    <p>App.js</p>
  </blockquote>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;Header /&gt;
          &lt;Switch&gt;
            &lt;Route exact path='/:q' component={SearchPage} /&gt; //trying to route here
          &lt;/Switch&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <blockquote>
    <p>SearchField.js</p>
  </blockquote>
  
  <pre><code>import React from 'react'
  
  import { withRouter } from 'react-router-dom'
  
  class SearchField extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              query: ''
          }
      }
  
      handleChange = event =&gt; {
          const {name, value, type, checked} = event.target
          type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
      }
  
      handleSubmit = event =&gt; {
          event.preventDefault()
          this.props.history.push(`/${this.state.query}`) //my routing attempt using history.push
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;form className="form-inline my-2 my-lg-0" onSubmit={this.handleSubmit}&gt;
                      &lt;input
                          className="form-control mr-sm-2"
                          type="search"
                          name="query"
                          onChange={this.handleChange}
                          value={this.state.query}
                          placeholder="Search"
                          aria-label="Search"
                      /&gt;
                      &lt;button className="btn btn-outline-success my-2 my-sm-0" type="submit"&gt;Search&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default withRouter(SearchField)
  </code></pre>
  
  <p>So whenever I type the query onto the search field, it correctly displays it on the address bar like this:</p>
  
  <p><a href="https://i.stack.imgur.com/KVAGI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KVAGI.jpg" alt="enter image description here"></a></p>
  
  <p>but the front-end stays intact without changing the query (and no console errors either - completely clean). It's only when I <em>refresh</em> the page is my new query <code>safe</code>, for example, comes into play. However, I need it to <em>auto-refresh</em> whenever I fire the enter or press the <code>Search</code> button on my query without the need of <em>manually</em> refreshing the page to see my query results.</p>
  
  <p>I've read this <a href="https://stackoverflow.com/a/42716055/2924072">post</a> quite diligently and I've tried all these steps, but I'm still unsuccessful with any approach that I've read.</p>