title: BrowserRoute Switch not showing pages
body: <p>Im at my whits end, ive followed tutorials for hours now and i cant get it to work. basically the Switch does not work when i press the links.It just displays nothing but does change the link.</p>
  
  <p>App.js</p>
  
  <pre><code>import './index.css';
  import React, { Component } from 'react';
  import {BrowserRouter, Route, Switch} from 'react-router-dom';
  import Home from './Home';
  import Shop from './Shop';
  import MainNav from './MainNav';
  
  class App extends Component {
     render() {
      return (
          &lt;BrowserRouter&gt;
          &lt;div className="App"&gt;
            &lt;MainNav /&gt; 
              &lt;Switch&gt;
                &lt;Route exact path="/" Component={Home}/&gt;
                &lt;Route path="/Shop" Component={Shop}/&gt;
              &lt;/Switch&gt;
              &lt;/div&gt;
          &lt;/BrowserRouter&gt;
      );
   }
  }
  export default App;
  </code></pre>
  
  <p>MainNav.js</p>
  
  <pre><code>import { IoIosHome } from "react-icons/io";
  import { IoIosListBox } from "react-icons/io";
  import { IoIosBeer } from "react-icons/io";
  import { IoIosArrowDown } from "react-icons/io";
  import React, { useState, useEffect, useRef, Component, } from 'react';
  import { CSSTransition } from 'react-transition-group';
  import {NavLink} from "react-router-dom";
  
  class MainNav extends Component {
    render() {
      return (      
            &lt;Navbar&gt;
              &lt;NavLink exact to="/" &gt;&lt;NavItem icon={&lt;IoIosHome /&gt;}/&gt;&lt;/NavLink&gt;
              &lt;NavLink to="/Shop"&gt;&lt;NavItem icon={&lt;IoIosBasket /&gt;}/&gt;&lt;/NavLink&gt;
              &lt;NavItem icon={&lt;IoIosListBox /&gt;} /&gt;
              &lt;NavItem icon={&lt;IoIosArrowDown /&gt;}&gt;
                &lt;DropdownMenu&gt;&lt;/DropdownMenu&gt;
              &lt;/NavItem&gt;
            &lt;/Navbar&gt; 
      );
   } 
  }
  
  function NavItem(props) {
    const[open, setOpen] = useState(false);
  
    return (
     &lt;li classname="nav-item"&gt;
       &lt;a href="#" className="icon-button" onClick={() =&gt; setOpen(!open)}&gt;
       {props.icon}
       &lt;/a&gt;  
  
       {open &amp;&amp; props.children}
     &lt;/li&gt;  
    );
  }
  </code></pre>
  
  <p>The home and shop just has some text in and works when i bring them in outside the switch. ive tried all these examples changing to classes and functions respectively.</p>
  
  <p><a href="https://www.w3jar.com/react-navigation-example-with-react-router-dom/" rel="nofollow noreferrer">https://www.w3jar.com/react-navigation-example-with-react-router-dom/</a>
  <a href="https://codesandbox.io/s/xkj1xKO6r?file=/index.js" rel="nofollow noreferrer">https://codesandbox.io/s/xkj1xKO6r?file=/index.js</a>
  <a href="https://www.youtube.com/watch?v=lCbcB9AU-98&amp;list=PL3I69UeHTyDNUK8t-GIkwWfY73rEW8LS2&amp;index=4&amp;t=0s" rel="nofollow noreferrer">https://www.youtube.com/watch?v=lCbcB9AU-98&amp;list=PL3I69UeHTyDNUK8t-GIkwWfY73rEW8LS2&amp;index=4&amp;t=0s</a></p>
  
  <p>Im starting to think im missing something else.</p>