React Router最初不渲染组件

这对我来说很奇怪。我在本地启动我的应用程序。我的应用程序中只有标题和TaskPage，就像这样。

  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));