title: × ReferenceError: Home is not defined
body: <p>I wanted to import react router to my components and got the error as described in the 'title'!</p>
  <p>btw I'm doing it from a tutorial crash course!</p>
  <p>I will show my files below</p>
  <p>App.js</p>
  <pre><code>import { BrowserRouter, Route } from &quot;react-router-dom&quot;;
  import &quot;./App.css&quot;;
  import Header from &quot;./components/Header&quot;;
  import Home from &quot;./Pages/Home&quot;;
  import About from &quot;./Pages/About&quot;;
  import Profile from &quot;./Pages/Profile&quot;;
  
  
  function App() {
  return (
  &lt;BrowserRouter&gt;
    &lt;div className=&quot;App&quot;&gt;
      &lt;Header /&gt;
    &lt;/div&gt;
    &lt;Route path=&quot;/&quot; component={Home} exact /&gt;
    &lt;Route path=&quot;/about&quot; component={About} /&gt; 
    &lt;Route path=&quot;/profile&quot; component={Profile} /&gt;
  &lt;/BrowserRouter&gt;
  );
  }
  export default App;
  </code></pre>
  <p>Home.js</p>
  <pre><code>const Home = () =&gt; {
  return &lt;h1&gt;Home Page&lt;/h1&gt;;
  };
  
  export default Home;
  </code></pre>
  <p>About.js</p>
  <pre><code>const About = () =&gt; {
  return &lt;h1&gt;About Page&lt;/h1&gt;;
  };
  
  export default About;
  </code></pre>
  <p>Profile.js</p>
  <pre><code>const Profile = () =&gt; {
  return &lt;h1&gt;Profile Page&lt;/h1&gt;;
  };
  
  export default Profile;
  </code></pre>
  <p>Header.js</p>
  <pre><code>const Header = () =&gt; {
  return (
      &lt;&gt;
          &lt;h1&gt;React Router Dom&lt;/h1&gt;
      &lt;/&gt;
  )
  }
  
  export default Header;
  </code></pre>