title: Changing react route without NavLink
body: <p>I have two pages. The first one is the homepage and has a search bar.
  The second one is listing page which shows items which have been searched.</p>
  
  <pre><code>&lt;BrowserRouter&gt;
    &lt;div&gt;
      &lt;ScrollToTop&gt;
        &lt;Route exact path="/" component={Home}/&gt;
        &lt;Route path="/tours/" component={Items}/&gt;
      &lt;/ScrollToTop&gt;
    &lt;/div&gt;
  &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>in the Items.js, I have another component for search menu.</p>
  
  <pre><code>&lt;SearchOverlayMenu/&gt;
  </code></pre>
  
  <p>and in SearchOverlayMenu I have a simple form component called SearchOverlayMenuForm like this</p>
  
  <pre><code>&lt;div className="text-right"&gt;
    &lt;button onClick={this.handleFormSubmit}&gt;
      &lt;i className="fa fa-search"&gt;&lt;/i&gt;
    &lt;/button&gt;
    &lt;input id="query" className="bfont text-right" name="q" type="search"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my problem is when I type a keyword in the query input and press the submit bottom, I can't use NavLink and I also don't have access to <code>this.history.push(...);</code></p>
  
  <p>and this is my 'handleformsubmit' function in SearchOverlayMenuForm component:</p>
  
  <pre><code>handleFormSubmit() {
      let query = document.getElementById('query').value;
      console.log(query);
      let newurl = '/tours/?q=' + query;
      this.history.push(newurl);
  }
  </code></pre>
  
  <p>How I can redirect users to target URL?</p>