react-router-redux of ConnectedRouter express TypeError: Cannot read property 'dispatch' of undefined

I'm setting up react-router in my React and Redux app.
But when I used ConnectedRouter component which belongs to react-router-redux and made the component includes createBrowserHistory, the error occurred.
I can't understand how to fix this problem at all!
plz any help!

error

version in this app:
node -v => v8.12.0
npm -v => 6.4.1

and run following command:
create-react-app --use-npm
npm install --save react-router-dom
npm install --save react-router-dom react-router-redux@next history

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

import { Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import createBrowserHistory from 'history/createBrowserHistory'
import TodoApp from './containers/TodoApp';
import Error from './components/Error';
import createStore from './store';

//instance of history
const history = createBrowserHistory();

//store
const store = createStore(history);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={TodoApp} />
        <Route exact path="/error" component={Error} />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

src/store/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';

import { Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import createBrowserHistory from 'history/createBrowserHistory'
import TodoApp from './containers/TodoApp';
import Error from './components/Error';
import createStore from './store';
//Last line is src/store/index.js

//historyのinstance
const history = createBrowserHistory();

//store
const store = createStore(history);


ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <Route exact path="/" component={TodoApp} />
        <Route exact path="/error" component={Error} />
       </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();


//  structure of store
// ーーーーーーーーーーーーーーーーーー

// {
//   tasks: {
//     task: '',
//     tasks: []
//   },
//   router: {
//     location: {
//       // some info
//     }
//   }
// }

// ーーーーーーーーーーーーーーーーーー

src/containers/TodoApp

import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import TodoApp from '../components/TodoApp';
import { inputTask, addTask} from '../actions/tasks';

function mapStateToProps({ tasks }) {
  return {
    task: tasks.task,
    tasks: tasks.tasks
  };
}

function mapDispatchToProps(dispatch) {
  return {
    addTask(task) {
      dispatch(addTask(task));
    },
    inputTask(task) {
      dispatch(inputTask(task))
    },
    redirectToError() {
      dispatch(push('/error'));
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

package.json

{
  "name": "todo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "history": "^4.7.2",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-router-redux": "^5.0.0-alpha.9",
    "react-scripts": "2.1.2",
    "redux": "^4.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}