title: How to access history in a component that is not in Router List?
body: <p>I know there are a few questions about it but I can't get it working.
  When I use useHistory() in searchbar component, i got undefined in history.
  The same when I tried to access history.push via props, because Searchbar is not listed in Routes.jsx. How can I progamatically navigate to other route from a component that is no in routes list?</p>
  
  <p>That is my app.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App () {
    return (
      &lt;ItemsProvider&gt;
        &lt;div className="App"&gt;
          &lt;Header logo={Logo} /&gt;
          &lt;main className="container"&gt;
            &lt;Routes /&gt;
          &lt;/main&gt;
        &lt;/div&gt;
      &lt;/ItemsProvider&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Routes.jsx</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default props =&gt; {
    return (
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/items/:id" component={Item} /&gt;
          &lt;Route path="/items" component={Results} /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>
  
  <p>Searchbar.jsx</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default props =&gt; {
    let history = useHistory();
  
    const handleSubmit = e =&gt; {
      e.preventDefault();
      history.push(`/items?q=${document.getElementById('searchBar').value}`);
    };
  
    return (
      &lt;form className="search col-9" onSubmit={handleSubmit}&gt;
        &lt;input
          type="text"
          id="searchBar"
          placeholder="Nunca deixe de buscar"
          className="search-bar"
        /&gt;
        &lt;button className="search-bar--submit"&gt;
          &lt;img src={SearchIcon} alt="Search Icon" /&gt;
        &lt;/button&gt;
      &lt;/form&gt;
    );
  };</code></pre>
  </div>
  </div>
  </p>