title: How to load a new component when button clicked?
body: <p>I want to open another component which is in my example <code>&lt;HomePage /&gt;</code> when user fills a login form and clicks the submit button. I searched out and i got too many ways but not sure why none worked with me. Is there just a simple way to achieve this with React Hooks?</p>
  
  <p><strong>Login Component</strong></p>
  
  <pre><code>const submit_login = () =&gt;{
      //code to open &lt;HomePage /&gt; Component
  }
  
  &lt;form&gt;
      &lt;div&gt;
          &lt;input type="text" placeholder="username"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="password" class="form-control" placeholder="password"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;input type="submit" onClick={submit_login}  value="Login"/&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is a very simple scenario, I believe this should be very easy to implement.
  I tried <code>router</code> <code>switch</code>, <code>hashrouter</code>, <code>useHistory</code> , <code>hookrouter</code> but all these didn't worked. some of the solutions i found was not updated since i am using latest version of ReactJS. </p>