title: My react js portfolio app using React Router does not load components until I refresh the page. Is there any fix to this?
body: <h1>My react js portfolio app using React Router does not load components until I refresh the page.  Is there any fix to this?</h1>
  <hr />
  <p>I'm creating a react js portfolio website and I'm using react router for navigation.  Users navigate the site through a navbar on the left side.  <a href="https://i.stack.imgur.com/FM1jo.png" rel="nofollow noreferrer">Navbar on the left</a>. When I click the different buttons, eg.about, the link changes from http://localhost:3000/ to http://localhost:3000/about but the page does not load in.  <a href="https://i.stack.imgur.com/X4FWn.png" rel="nofollow noreferrer">Page after clicking about</a>  I then have to reload before the page loads in. Something intresting is when I am on the portfolio page(http://localhost:3000/portfolio)  I can switch to another page, such as contact but I can't switch back.  Anyways, can anyone help?  Here is my code.</p>
  <h2>App.JS</h2>
  <pre><code>import {Route, Routes } from 'react-router-dom'
  import Home from './components/Home'
  import About from './components/About'
  import Contact from './components/Contact'
  import Layout from './components/Layout'
  import Portfolio from './components/Portfolio'
  import './App.scss'
  
  function App() {
    return (
      &lt;&gt;
        &lt;Routes&gt;
          &lt;Route path=&quot;/&quot; element={&lt;Layout /&gt;}&gt;
            &lt;Route index element={&lt;Home /&gt;} /&gt;
            &lt;Route path=&quot;about&quot; element={&lt;About /&gt;} /&gt;
            &lt;Route path=&quot;/contact&quot; element={&lt;Contact /&gt;} /&gt;
            &lt;Route path=&quot;/portfolio&quot; element={&lt;Portfolio /&gt;} /&gt;
          &lt;/Route&gt;
        &lt;/Routes&gt;
      &lt;/&gt;
    )
  }
  
  export default App;
  </code></pre>
  <h2>index.js</h2>
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import reportWebVitals from './reportWebVitals'
  import { BrowserRouter } from 'react-router-dom'
  import App from './App'
  import './index.css'
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;BrowserRouter&gt;
        &lt;App /&gt;
      &lt;/BrowserRouter&gt;
      ,
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  )
  
  reportWebVitals()
  </code></pre>
  <h2>SideBar - index.js</h2>
  <pre><code>import './index.scss'
  import LogoS from '../../assets/images/logo-s.png'
  import LogoSubtitle from '../../assets/images/logo_sub.png'
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
  import {
    faInstagram,
    faGithub,
    faYoutube,
    faDiscord,
  } from '@fortawesome/free-brands-svg-icons'
  import { faHome, faUser, faEnvelope, faSuitcase } from '@fortawesome/free-solid-svg-icons'
  import { Link, NavLink } from 'react-router-dom'
  
  const Sidebar = () =&gt; {
    return (
      &lt;div className=&quot;nav-bar&quot;&gt;
        &lt;Link className=&quot;logo&quot; to=&quot;/&quot;&gt;
          &lt;img src={LogoS} alt=&quot;Logo&quot; /&gt;
          &lt;img className=&quot;sub-logo&quot; src={LogoSubtitle} alt=&quot;Mindque&quot; /&gt;
        &lt;/Link&gt;
        &lt;nav&gt;
          &lt;NavLink exact=&quot;true&quot; activeclassname=&quot;active&quot; to=&quot;/&quot;&gt;
            &lt;FontAwesomeIcon icon={faHome} color=&quot;#4d4d4e&quot; /&gt;
          &lt;/NavLink&gt;
          &lt;NavLink activeclassname=&quot;active&quot; className=&quot;about-link&quot; to=&quot;/about&quot;&gt;
            &lt;FontAwesomeIcon icon={faUser} color=&quot;#4d4d4e&quot; /&gt;
          &lt;/NavLink&gt;
          &lt;NavLink activeclassname=&quot;active&quot; className=&quot;portfolio-link&quot; to=&quot;/portfolio&quot;&gt;
            &lt;FontAwesomeIcon icon={faSuitcase} color=&quot;#4d4d4e&quot; /&gt;
          &lt;/NavLink&gt;
          &lt;NavLink
            activeclassname=&quot;active&quot;
            className=&quot;contact-link&quot;
            to=&quot;/contact&quot;
          &gt;
            &lt;FontAwesomeIcon icon={faEnvelope} color=&quot;#4d4d4e&quot; /&gt;
          &lt;/NavLink&gt;
        &lt;/nav&gt;
        &lt;ul&gt;
          &lt;li&gt;
            &lt;a
              href=&quot;https://www.instagram.com/mindqueblast/&quot;
              target=&quot;_blank&quot;
              rel=&quot;noreferrer&quot;
            &gt;
              &lt;FontAwesomeIcon icon={faInstagram} color=&quot;#4d4d4e&quot; /&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a
              href=&quot;https://github.com/MindqueBlast&quot;
              target=&quot;_blank&quot;
              rel=&quot;noreferrer&quot;
            &gt;
              &lt;FontAwesomeIcon icon={faGithub} color=&quot;#4d4d4e&quot; /&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a
              href=&quot;https://www.youtube.com/channel/UC9QYALAwUUxW21PASjhxagQ&quot;
              rel=&quot;noreferrer&quot;
              target=&quot;_blank&quot;
            &gt;
              &lt;FontAwesomeIcon icon={faYoutube} color=&quot;#4d4d4e&quot; /&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href=&quot;https://discordapp.com/users/694984812062310421&quot; rel=&quot;noreferrer&quot; target=&quot;_blank&quot;&gt;
              &lt;FontAwesomeIcon icon={faDiscord} color=&quot;#4d4d4e&quot; /&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    )
  }
  
  export default Sidebar
  </code></pre>
  <p><em><strong>Thank you!</strong></em></p>