Reactルーターが最初にコンポーネントをレンダリングしない

これは私にとって奇妙なものです。アプリをローカルで起動します。私のアプリには、そのようにヘッダーとタスクページがあります。

  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 (
        <div>
         <Header />
           <main>
             <Route exact path="/" component={TasksPage} />
          </main>
        </div>
      );
    }
  }



  export default withRouter(connect()(App));

そして、私のルーターのもの。

  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(
    <Provider store={store}>
      <ConnectedRouter history={history}>
       <div>
        <Component />
        </div>
       </ConnectedRouter>
       </Provider>,
        rootElement
        );
       }


    if (module.hot) {
    module.hot.accept('./views/app', () => {
    render(require('./views/app').default);
     })
    }


    registerServiceWorker();

最初は空白のページが表示されます。しかし、アプリの実行中にアプリページに変更を加えて保存すると、スペースや行の戻りなど、重要ではないものがあり、突然タスクページが表示されます。その場合は正常に動作します。このプロセスのどの時点でもコンソールにエラーはないので、アプリが最初に読み込まれたときにどこかにルーティングに問題があると思います。

あるいは、このTaskPageと関係があるのか​​もしれません。

 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 (
  <div className="g-row">
    <div className="g-col">
      <TaskForm handleSubmit={this.props.createTask} />
    </div>

    <div className="g-col">
      <TaskFilters filter={this.props.filterType} />
      <TaskList
        removeTask={this.props.removeTask}
        tasks={this.props.tasks}
        updateTask={this.props.updateTask}
      />
    </div>
  </div>
  );
 }
 }


 //=====================================
//  CONNECT
//-------------------------------------

 const mapStateToProps = createSelector(
getTaskFilter,
getVisibleTasks,
(filterType, tasks) => ({
 filterType,
 tasks
 })
 );

const mapDispatchToProps = Object.assign(
 {},
 tasksActions
  );

export default withRouter(connect(
mapStateToProps,
 mapDispatchToProps
 )(TasksPage));