title: How to link to certain page upon form submission using React Router
body: <p>I'm learning React Router and I have a simple Nav bar component that has an input/search bar in it. When search is clicked, it will search an API and I would like to use React Router to route to a new page (/results) to display the results.</p>
  <p>I'd like to have my component <code>SearchResults</code> be displayed when the submit button is clicked.</p>
  <p>This is my code:</p>
  <pre><code>const Search = () =&gt; {
    const apiKey = 'xxxxxx';
    const [input, setInput] = useState('');
  
    const handleSubmit = (e) =&gt; {
      e.preventDefault();
      searchAPI();
    };
  
    const searchAPI = async () =&gt; {
      const res = await fetch(`http://www.omdbapi.com/?apikey=${apiKey}&amp;s=${input}`);
      const data = await res.json();
      console.log(data);
    };
  
    return (
      &lt;form&gt;
        &lt;input onChange={(e) =&gt; setInput(e.target.value)}&gt;&lt;/input&gt;
        &lt;Link to=&quot;/results&quot;&gt;
          &lt;button type=&quot;submit&quot; onClick={handleSubmit}&gt;
            search
          &lt;/button&gt;
        &lt;/Link&gt;
      &lt;/form&gt;
    );
  };
  </code></pre>
  <p>And these are my routes:</p>
  <pre><code>function App() {
    return (
      &lt;&gt;
        &lt;Router&gt;
          &lt;Nav /&gt;
          &lt;Route path=&quot;/&quot; exact component={Home} /&gt;
          &lt;Route path=&quot;/about&quot; component={About} /&gt;
          &lt;Route path=&quot;/results&quot; component={SearchResults} /&gt;
        &lt;/Router&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>I expect the <code>&lt;Link to=&quot;/results&quot;&gt;</code> to automatically link to the /results page upon submit, but this is not the case. Any help would be appreciated!</p>