title: Reactjs/Redux -- this.props.router undefined
body: <p>I am building a login system -- when the user fills in the form - I've created a redux action to "authenticate" the user -- so when this.props.authData.isLogged is true -- I want to invoke the navigate function to bounce the user to the home page. However, this.props.router is undefined? But I've defined the withRouter?</p>
  
  <pre><code>import React, { Component } from 'react'
  //import { render } from 'react-dom'
  //import { withRouter } from 'react-router-dom'
  import { withRouter } from 'react-router';
  
  // components
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { fetchAuthentication } from '../../actions/authAction';
  
  import LoginSyncValidationForm from './LoginSyncValidationForm'
  
  
  // this is a class because it needs state
  class Login extends Component {
  
    constructor(props, context) {
      super(props, context);
      this.submit = this.submit.bind(this);
    }
  
    componentDidMount() {    
      // console.log('this', this)
    }
  
    submit (data) {
      this.props.fetchAuthentication(data);
    }
  
    navigate() {
      console.log("navigate", this)
      //this.props.router.push('/home');
    }
  
    render() {
      console.log(this.props.authData)
  
      if(this.props.authData.isLogged){
        this.navigate();
      }
  
      return (
        &lt;div className="Page"&gt;
          &lt;h2&gt;Login&lt;/h2&gt;
          &lt;LoginSyncValidationForm onSubmit={this.submit} /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  
  function mapStateToProps(state) {
    return {
      authData: state.auth
    };
  }
  
  function mapDispatchToProps(dispatch) {
   return bindActionCreators({ fetchAuthentication }, dispatch);
  }
  
  
  const {object} = React.PropTypes
  Login.propTypes = {
    router: object
  }
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login))
  </code></pre>