title: React Router only rendering first 2 components
body: <pre><code>import React from 'react';
  import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
  import Header from './Header';
  import Footer from './Footer';
  import Banner from './Banner';
  import Home from './Home';
  import About from './About';
  import Services from './Services';
  import Book from './Book';
  
  function Layout() {
      return(
          &lt;Router&gt;
              &lt;Header/&gt;
                  &lt;Route exact path="/" component={Home}/&gt;
                  &lt;Route exact path="/Home" component={Home}/&gt;
                  &lt;Route exact path="/About" components={About}/&gt;
                  &lt;Route exact path="/Services" components={Services}/&gt;
                  &lt;Route exact path="/Book" components={Book}/&gt;
              &lt;Footer/&gt;
          &lt;/Router&gt;
      )
  }
  
  export default Layout;
  </code></pre>
  
  <p>Only the "/" and "/Home" paths are rendering when clicking the links. If I set the "/" component to any of the other ones (About, Services, Book) then they render correctly. Really confusing :/</p>