title: React component in Switch not loading automatically on page load(React beginner)
body: <p>I'm a React beginner and I've tried to build my homepage based on this logic(not my code): <a href="https://github.com/vumbula/vumbula-react/tree/master/chapter5/Link-example/src" rel="nofollow noreferrer">https://github.com/vumbula/vumbula-react/tree/master/chapter5/Link-example/src</a></p>
  <hr />
  <p>This is my index.js:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {BrowserRouter} from 'react-router-dom';
  import App from './components/App';
  
  ReactDOM.render(
      &lt;BrowserRouter&gt;
        &lt;App/&gt;
      &lt;/BrowserRouter&gt;,
      document.getElementById('root'));
  </code></pre>
  <p>And this is my App.js:</p>
  <pre><code>import React, { Component } from 'react';
  import { Switch, Route, Link } from 'react-router-dom';
  import './App.css';
  import Film from './Film.js';
  import TV from './TV.js';
  import me from '../images/me-cropped.png'
  import film from '../images/film.png'
  import tv from '../images/tv.png'
  
  
  class App extends Component {
    render() {
      return (
        &lt;div className=&quot;App&quot;&gt;
          &lt;Link to=&quot;/&quot;&gt;
            &lt;div className=&quot;banner&quot;&gt;
              &lt;div className=&quot;banner-content&quot;&gt;
                My favs
                &lt;img src={me} alt=&quot;me&quot; height=&quot;140px&quot; /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Link&gt;
          &lt;div className=&quot;mainpage&quot;&gt;
            &lt;Switch&gt;
              &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
              &lt;Route exact path=&quot;/film&quot; component={Films} /&gt;
              &lt;Route exact path=&quot;/tv&quot; component={TVseries} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export const Home = () =&gt; (
      &lt;div className=&quot;mainpage-content&quot;&gt;
        &lt;div className=&quot;text-row&quot;&gt;
          &lt;a className=&quot;film-text&quot;&gt;
            Film
          &lt;/a&gt;
          &lt;a className=&quot;tv-text&quot;&gt;
            TV
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div className=&quot;icon-row&quot;&gt;
          &lt;Link to=&quot;/film&quot; className=&quot;Film.js&quot;&gt;
            &lt;img className=&quot;film-button&quot; src={film} alt=&quot;film&quot; /&gt;
          &lt;/Link&gt;
          &lt;Link to=&quot;/tv&quot; className=&quot;TV.js&quot;&gt;
            &lt;img className=&quot;tv-button&quot; src={tv} alt=&quot;tv&quot; /&gt;
          &lt;/Link&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  );
  
  export const Films = () =&gt; (
    &lt;div className=&quot;table-content&quot;&gt;
      &lt;Film /&gt;
    &lt;/div&gt;
  );
  
  export const TVseries = () =&gt; (
    &lt;div className=&quot;table-content&quot;&gt;
      &lt;TV /&gt;
    &lt;/div&gt;
  );
  
  export default App;
  </code></pre>
  <hr />
  <p>When I run my application using 'npm start' the page loads, but only the banner is visible. If I click on the banner(which is also a Link), I get the page I want to load to begin with(Banner + Home component, wrapped in a mainpage div).</p>
  <p>I was under the impression that since the path for Home is &quot;/&quot; it would load automatically on page load. What am I missing here?</p>