React-router: the context `router.history`

I came across this problem, I just can not figure it out. Let's start with package.json:

{ "name": "temp", "version": "0.1.0", "private": true, "dependencies": { "react": "^15.6.1", "react-dom": "^15.6.1", "react-redux": "5.0.5", "react-router": "^3.0.2", "react-router-dom": "^4.1.1", "react-router-redux": "^4.0.8", "react-scripts": "1.0.10", "redux": "3.7.2", "redux-devtools-extension": "^2.13.2", "redux-thunk": "^2.2.0" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } } 

You may be able to notice here a package with some incorrect version ...

Next, we turn to creating a story and synchronize with history:

 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; import { Provider } from 'react-redux'; import { createStore, applyMiddleware } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import thunk from 'redux-thunk'; import { Router, Route, hashHistory } from 'react-router'; import { syncHistoryWithStore } from 'react-router-redux'; import reducer from './Reducers'; import History from './Components/History/History.js'; import SignForm from './Components/SignForm/SignForm.js'; const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk))); const history = syncHistoryWithStore(hashHistory, store); // <---- this ReactDOM.render( <Provider store={store}> <Router history={history}> <Route exact path="/" component={SignForm} /> <Route path="/history" component={History} /> <Route render={() => { return <div> Not Found! </div>; }} /> </Router> </Provider>, document.getElementById('root') ); registerServiceWorker(); 

Pay attention to <Router history={history}> - an error similar to mine occurs if you do not assign history to the router. But this is not my case, alas.

And, actually, the problem code:

 import React, { Component } from 'react'; import { withRouter } from 'react-router-dom'; import { connect } from 'react-redux'; import { changeName, changePass, authReset, auth } from '../../Reducers/User.js'; class SignForm extends Component { render() { ... } } function mapStateToProps(state) { return { user: state.user } } function mapDispatchToProps(dispatch) { return { onNameChange: (event) => { dispatch(changeName(event.target.value)); }, onPasswordChange: (event) => { dispatch(changePass(event.target.value)); }, onSignIn: (name, password) => { dispatch(authReset()); dispatch(auth('sign-in', name, password)); }, onSignUp: (name, password) => { dispatch(authReset()); dispatch(auth('sign-up', name, password)); } } } export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SignForm)); // <<<<<<<< this 

In the last line, if we wrap the connect in withRouter , I get an error:

 Warning: Failed context type: The context `router.history` is marked as required in `Route`, but its value is `undefined`. in Route (created by withRouter(Connect(SignForm))) in withRouter(Connect(SignForm)) (created by RouterContext) in RouterContext (created by Router) in Router (at index.js:23) in Provider (at index.js:22) 

If the withRouter not used, then there is no error, but in this case the stop is not synchronized with the events of the history, which is wrong = (

What is the problem?