title: React app website page only loads upon refresh
body: <p>Everything works fine when in my website, except everytime for the page to render correctly I have to refresh my page. I have tried the numerous solutions out there, except nothing works.</p>
  <p>This is the code for the app component.</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;BrowserRouter&gt;
    &lt;Switch&gt;
      &lt;Route path="/" exact component={Home} /&gt;
        &lt;Route path="/about" component={About} /&gt;
        &lt;Route path="/skills" component={Skills} /&gt;
        &lt;Route path="/projects" component={Projects} /&gt;
        &lt;Route path="/work" component={Work} /&gt;
        &lt;Route path="/blogs" component={Blogs} /&gt;
        &lt;Route path="/blogs/blog-details"component={BlogDetails}/&gt;
         &lt;Route path="/contact" component={Contact} /&gt;
     &lt;/Switch&gt;
    &lt;/BrowserRouter&gt;
   );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>Please someone help so that when I go to each of the pages, it just works!!</p>