title: React Router not rendering component initially
body: <p>This is weird one for me.  I start my app up locally.  I just have a Header and TaskPage in my App like so.  </p>
  
  <pre><code>  import React, { Component } from 'react';
    import { withRouter } from 'react-router-dom';
    import { connect } from 'react-redux';
    import Header from '../components/header';
    import TasksPage from '../pages/tasks';
    import { Route } from 'react-router';
  
    class App extends Component {
      render() {
        return (
          &lt;div&gt;
           &lt;Header /&gt;
             &lt;main&gt;
               &lt;Route exact path="/" component={TasksPage} /&gt;
            &lt;/main&gt;
          &lt;/div&gt;
        );
      }
    }
  
  
  
    export default withRouter(connect()(App));
  </code></pre>
  
  <p>And then my router stuff.  </p>
  
  <pre><code>  import './views/styles/styles.css';
  
    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { ConnectedRouter } from 'react-router-redux';
    import history from './history';
    import configureStore from './store';
    import registerServiceWorker from './utils/register-service-worker';
    import App from './views/app';
    import TaskPage from './views/pages/tasks'
  
    const store = configureStore();
    const rootElement = document.getElementById('root');
  
  
    function render(Component) {
    console.log('COMPONENT::',Component);
     ReactDOM.render(
      &lt;Provider store={store}&gt;
        &lt;ConnectedRouter history={history}&gt;
         &lt;div&gt;
          &lt;Component /&gt;
          &lt;/div&gt;
         &lt;/ConnectedRouter&gt;
         &lt;/Provider&gt;,
          rootElement
          );
         }
  
  
      if (module.hot) {
      module.hot.accept('./views/app', () =&gt; {
      render(require('./views/app').default);
       })
      }
  
  
      registerServiceWorker();
  </code></pre>
  
  <p>I initially get a blank page.  But if I make a change to the App page and save it while the app is running, like just a space or line return, something insignificant, I get my tasks page suddenly. It works fine then.  I have no errors in my console at any point during this process so I think I have something wrong with my routing somewhere when the app initially loads. </p>
  
  <p>Or maybe it has something to do with this TaskPage.  </p>
  
  <pre><code> import React, { Component } from 'react';
   import { List } from 'immutable';
   import PropTypes from 'prop-types';
   import { connect } from 'react-redux';
   import { withRouter } from 'react-router-dom';
   import { createSelector } from 'reselect';
   import { getTaskFilter, getVisibleTasks, tasksActions } from 'src/tasks';
    import TaskFilters from '../../components/task-filters';
   import TaskForm from '../../components/task-form';
   import TaskList from '../../components/task-list';
  
  
  export class TasksPage extends Component {
  static propTypes = {
  createTask: PropTypes.func.isRequired,
  filterTasks: PropTypes.func.isRequired,
  filterType: PropTypes.string.isRequired,
  loadTasks: PropTypes.func.isRequired,
  location: PropTypes.object.isRequired,
  removeTask: PropTypes.func.isRequired,
  tasks: PropTypes.instanceOf(List).isRequired,
  updateTask: PropTypes.func.isRequired
  };
  
  componentWillMount() {
  this.props.loadTasks();
  this.props.filterTasks(
    this.getFilterParam(this.props.location.search)
  );
  }
  
  componentWillReceiveProps(nextProps) {
  if (nextProps.location.search !== this.props.location.search) {
    this.props.filterTasks(
      this.getFilterParam(nextProps.location.search)
    );
   }
  }
  
  componentWillUnmount() {
   // this.props.unloadTasks();
   }
  
  getFilterParam(search) {
  const params = new URLSearchParams(search);
  return params.get('filter');
  }
  
  render() {
  return (
    &lt;div className="g-row"&gt;
      &lt;div className="g-col"&gt;
        &lt;TaskForm handleSubmit={this.props.createTask} /&gt;
      &lt;/div&gt;
  
      &lt;div className="g-col"&gt;
        &lt;TaskFilters filter={this.props.filterType} /&gt;
        &lt;TaskList
          removeTask={this.props.removeTask}
          tasks={this.props.tasks}
          updateTask={this.props.updateTask}
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    );
   }
   }
  
  
   //=====================================
  //  CONNECT
  //-------------------------------------
  
   const mapStateToProps = createSelector(
  getTaskFilter,
  getVisibleTasks,
  (filterType, tasks) =&gt; ({
   filterType,
   tasks
   })
   );
  
  const mapDispatchToProps = Object.assign(
   {},
   tasksActions
    );
  
  export default withRouter(connect(
  mapStateToProps,
   mapDispatchToProps
   )(TasksPage));
  </code></pre>