title: routing to a new page from navbar with react routing
body: <p>I'm trying to make a 2nd page for my website and I'm having hard time understanding how react routing works .</p>
  <p>Here's the code:</p>
  <pre><code>import { FaGithub, FaUserAstronaut, FaLinkedin } from 'react-icons/fa';
  import MarsSvg from './MarsSvg';
  import MarsPage from '../pages/MarsPage'; 
  import { Routes, Route } from &quot;react-router-dom&quot;
  
  
  
  function NavBar () {
    return (
      &lt;nav className=''&gt;
        &lt;div className=&quot;flex justify-around items-center text-5xl&quot;&gt;
          &lt;Routes&gt;
            &lt;Route path=&quot;/mars&quot; element={&lt;MarsPage /&gt;} /&gt;
          &lt;/Routes&gt;
   
          &lt;MarsSvg/&gt;
          &lt;ul className='flex  hover:scale-125 hover:bg-white duration-500 rounded-full'&gt;
            &lt;a href='https://github.com/DevSnippy'&gt;
              &lt;FaGithub/&gt;
            &lt;/a&gt;
          &lt;/ul&gt;
  
          &lt;ul className='flex  hover:scale-125 hover:bg-white duration-500 rounded-full'&gt;
            &lt;FaUserAstronaut/&gt;
          &lt;/ul&gt;
  
          &lt;ul className='flex  hover:scale-125 hover:bg-white duration-500 rounded-full'&gt;
            &lt;FaLinkedin/&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
    )
  }
  
  export default NavBar
  </code></pre>
  <p>It does render a component but I want 2 things to happen:</p>
  <ul>
  <li>1st for the user to click an icon to activate the route</li>
  <li>2nd for it to a new blank page</li>
  </ul>