title: React router's switch statement doesn't render component
body: <p>I'm having an issue of when I click a link in the navbar that's in the header, instead of the component loading below, the whole page changes (and is blank. No error is visibly thrown, but not even the component that's supposed to render on that route shows up. </p>
  
  <p>I'll explain how this site setup works.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const initialState = {};
  const history = createHistory();
  const store = configureStore(initialState, history);
  const MOUNT_NODE = document.getElementById('app');
  
  const render = (messages) =&gt; {
    ReactDOM.render(
      &lt;Provider store={store}&gt;
        &lt;LanguageProvider messages={messages}&gt;
          &lt;ConnectedRouter history={history}&gt;
            &lt;Switch&gt;
              &lt;Route exact path="/" component={Splash} /&gt;
              &lt;Route path="/main" component={App} /&gt;
            &lt;/Switch&gt;
          &lt;/ConnectedRouter&gt;
        &lt;/LanguageProvider&gt;
      &lt;/Provider&gt;,
      MOUNT_NODE
    );
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When a user first enters the site, they see the splash page. Then they click a button that gets them to the main homepage. Here's the code for that:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const AppWrapper = styled.div`
    max-width: calc(768px + 16px * 2);
    margin: 0 auto;
    display: flex;
    min-height: 100%;
    padding: 0 16px;
    flex-direction: column;
  `;
  
  class App extends React.Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Header /&gt;
          &lt;AppWrapper&gt;
            Below this are where the new components should render.
            &lt;Switch&gt;
              &lt;Route path="/aboutme" component={AboutMe} /&gt;
              &lt;Route path="/models" component={Models} /&gt;
              &lt;Route path="/landscapes" component={Landscapes} /&gt;
            &lt;/Switch&gt;
            &lt;Footer /&gt;
          &lt;/AppWrapper&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see I'd like the header to remain on top regardless of what component is selected by the route.</p>
  
  <p>The header's navbar looks like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class NavBar extends React.Component {
  
    render() {
      return (
        &lt;div&gt;
  
          &lt;AppBar position="static" color="default" &gt;
            &lt;Toolbar&gt;
              &lt;Typography type="title" color="inherit"&gt;
                &lt;Link to="/models"&gt;Models&lt;/Link&gt;
              &lt;/Typography&gt;
              &lt;Typography type="title" color="inherit"&gt;
                &lt;Link to="/landscapes"&gt;Adventures&lt;/Link&gt;
              &lt;/Typography&gt;
              &lt;Typography type="title" color="inherit"&gt;
                &lt;Link to="/aboutme"&gt;About Me&lt;/Link&gt;
              &lt;/Typography&gt;
            &lt;/Toolbar&gt;
          &lt;/AppBar&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default NavBar;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I click a link here, the route in the address bar changes appropriately, but a blank page shows up without even the header/toolbar. Does anyone have any ideas on what I'm doing wrong here? I'm trying to use a react/redux boilerplate and am still learning.</p>