title: React Router: Render new view without page refresh
body: <p><img src="https://i.imgur.com/MP44XZx.gif" alt="React Route Load Test"></p>
  
  <p>Hello! What I'm trying to do is rework my react-router so the NavLink renders a completely new page on click, instead of rendering at the bottom of the div, as shown in the gif above.</p>
  
  <p>Here's the content of my main App.js component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  import Home from './Home.js';
  import About from './About.js';
  import September from './September.js';
  import Trilogy from './Trilogy.js';
  
  class App extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;Switch&gt;
              &lt;Route exact path='/' component={Home} /&gt;
              &lt;Route path='/about/' component={About} /&gt;
              &lt;Route path='/september/' component={September} /&gt;
              &lt;Route exact path='/september/trilogy/' component={Trilogy} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
    }
  }
  export default App;
  </code></pre>
  
  <p>The Home component's code, which holds the NavBar that's used in the Home Page.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, NavLink, Switch, Route } from 'react-router-dom';
  import logo from './logo.png';
  import About from './About.js';
  import September from './September.js';
  import Trilogy from './Trilogy.js';
  
  let NavBar = () =&gt; {
    return (
      &lt;div&gt;
        &lt;h2 className="container2"&gt;&lt;NavLink to='/about/'&gt;About&lt;/NavLink&gt; &lt;/h2&gt;
        &lt;img src={logo} className="somersetLogo" alt="somersetLogo" /&gt;
        &lt;h2 className="container" &gt;&lt;a href="mailto:contact@somersetproductions.co" className="mailto"&gt;Contact&lt;/a&gt;&lt;/h2&gt;
      &lt;/div&gt;
    )
  }
  
  class Home extends Component {
    render() {
      return (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;NavBar /&gt;
            &lt;Switch&gt;
              &lt;Route exact path='/about/' component={About} /&gt;
            &lt;/Switch&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      )
    }
  }
  
  export default Home;
  </code></pre>
  
  <p>Any idea what went wrong? Any help would be appreciated! Thanks!</p>