This.context.router.push does not work

Question

I am using response router version 4.0. I am trying to switch from one component to another when a button is clicked. For this, I applied routing for this. After implementation, when I press the navigation button, it gives me the error "Disconnect TypeError: this.context.router.push is not a function" and the warning "Invalid context type: invalid routertype context objectthat is being supplied to EmpLogin, expected function." I tried a lot, but could not get it to work. Below are my components and routing implementation. I used to use reactive router 2.0, and browserhistory.push worked.

export class EmpLogin extends React.Component {
  constructor(props) {
super(props);
this.state = {

};
}

loginID(e) {
this.setState({loginID: e.target.value});
}

 Password(e) {
this.setState({password: e.target.value});
}

 navigate(e){
    e.preventDefault();
    this.context.router.push('/EmpDetails');
  }

render() {
  return (
    <div>
    <div >
      <form>
        <input type="text" onChange={this.loginID.bind(this)} />
        <input type="password" onChange={this.Password.bind(this)} />  
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      </form>
    </div>
  </div>
);
 }
 }

  EmpLogin.contextTypes = {
  router: React.PropTypes.func.isRequired
 }

 export default EmpLogin;

Routing Implementation -

import React from 'react';
import ReactDOM from 'react-dom';
import EmpLogin from './EmpLogin';
import {Router, Route,HashRouter} from 'react-router-dom';
import {browserHistory,hashHistory} from 'react-router';
import EmpDetails from './EmpDetails';

ReactDOM.render((
 <HashRouter>
 <div>
  <Route exact path='/' component={EmpLogin}/>
  <Route path='/Emplogin' component={EmpLogin}/>
  <Route path='/EmpDetails' component={EmpDetails} />
  </div>
  </HashRouter>
 ), document.getElementById('root'));

Answer 1

response-router v4:

this.context.router.history.push('/EmpDetails')

response-router v4 push this.context.router. router history route , history, .

, 15.5.0, propTypes , :

npm install prop-types --save

yarn add prop-types

, . , , , .

Answer 2

, router :

:

EmpLogin.contextTypes = {
  router: React.PropTypes.object.isRequired
}

transitionTo push()

this.context.router.transitionTo('/EmpDetails');

Answer 3

instead you should use browserHistory from the react router ...

  browserHistory.push('/EmpDetails');