title: Why is my context.router undefined in my react component?
body: <p>I am trying to access my <code>router</code> from within my component and it is undefined.  Here is my <code>router</code>:</p>
  
  <pre><code>React.render(
      &lt;Provider store={store}&gt;
          {() =&gt;
              &lt;Router&gt;
                  &lt;Route path="/" component={LoginContainer} /&gt;
              &lt;/Router&gt;
          }
      &lt;/Provider&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>Here is the container: </p>
  
  <pre><code>class LoginContainer extends React.Component {
    constructor() {
      super();
    }
  
    static propTypes = {
      handleLogin: PropTypes.func.isRequired
    }
  
    static contextTypes = {
      router: React.PropTypes.object
    }
  
    handleLogin() {
      this.props.dispatch(Actions.login(null, null, this.context.router));
    }
  
    render() {
      return (
        &lt;Login
          auth={this.props}
          handleLogin={this.handleLogin}
         /&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    return {
      stuff: []
    }
  }
  
  
  export default connect(mapStateToProps)(LoginContainer);
  </code></pre>
  
  <p>And finally the component:</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  
  class Login extends React.Component {
      static propType = {
          handleLogin: PropTypes.func.isRequired
      }
      static contextTypes = {
          router: React.PropTypes.object
      }
      render() {
          return (    
              &lt;div className="flex-container-center"&gt;
                  &lt;form&gt;
                      &lt;div className="form-group"&gt;
                          &lt;button type="button" onClick={this.props.handleLogin}&gt;Log in&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          );
      }
  }
  
  module.exports = Login;
  </code></pre>
  
  <p>When I click on the <code>login</code> button, it hits the <code>handleLogin</code> in the container.  In my <code>handleLogin</code>, my <code>this</code> value is <code>undefined</code>.  I have tried to bind <code>this</code> to the function in the <code>constructor</code>, but it still is <code>undefined</code>.  </p>
  
  <p>Also, when I put a breakpoint in my <code>render</code> function, I have a <code>this.context.router</code>, but it is <code>undefined</code>.  How do I get my <code>this</code> correct in my <code>handleLogin</code> and how to I make sure that I have my <code>router</code> on the <code>context</code> and it is not <code>undefined</code>?</p>