title: React Router issue. Whenever login button is clicked. I am directed to a blank page with the homepage link appended to the login page link is made
body: <p>Whenever I click the login button, I am navigated to a blank page with the homepage link  appended to the login page link. It looks like this:
  <a href="https://i.stack.imgur.com/z5jsj.png" rel="nofollow noreferrer">Here is the image</a></p>
  <p>Here is my code for the login button.</p>
  <pre><code> &lt;Button onClick={() =&gt; {navigate(&quot;./homePage&quot;)}} className='Createuserbutton'  &gt;Login &lt;/Button&gt;
  </code></pre>
  <p>Here is my index.js code containing the router elements.</p>
  <pre><code>&lt;Router&gt;
  &lt;Routes&gt;
    &lt;Route exact path='/login' element={&lt;Login /&gt;} /&gt;
    &lt;Route exact path='/ModuleReviewForm' element={&lt;ModuleReviewForm /&gt;} /&gt;
    &lt;Route exact path='/commentBox' element={&lt;CommentBox /&gt;} /&gt;
    &lt;Route exact path='/homePage' element={&lt;HomePage /&gt;} /&gt;
    &lt;Route exact path='/logout' element={&lt;Logout /&gt;} /&gt;
    &lt;Route exact path='/account' element={&lt;Account /&gt;} /&gt;
    &lt;Route exact path='/searchPage' element={&lt;SearchPage /&gt;} /&gt;
    &lt;Route exact path='/searchPage' element={&lt;SearchPage /&gt;} /&gt;
  &lt;/Routes&gt;
  </code></pre>
    
  <p>I am wondering if I am referencing the page properly</p>