Why is my context.router undefined in my react component?

Question

I am trying to access my router from within my component and it is undefined. Here is my router:

React.render(
    <Provider store={store}>
        {() =>
            <Router>
                <Route path="/" component={LoginContainer} />
            </Router>
        }
    </Provider>,
    document.getElementById('app')
);

Here is the container:

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 (
      <Login
        auth={this.props}
        handleLogin={this.handleLogin}
       />
    );
  }
}

function mapStateToProps(state) {
  return {
    stuff: []
  }
}


export default connect(mapStateToProps)(LoginContainer);

And finally the component:

import React, { PropTypes } from 'react';

class Login extends React.Component {
    static propType = {
        handleLogin: PropTypes.func.isRequired
    }
    static contextTypes = {
        router: React.PropTypes.object
    }
    render() {
        return (    
            <div className="flex-container-center">
                <form>
                    <div className="form-group">
                        <button type="button" onClick={this.props.handleLogin}>Log in</button>
                    </div>
                </form>
            </div>
        );
    }
}

module.exports = Login;

When I click on the login button, it hits the handleLogin in the container. In my handleLogin, my this value is undefined. I have tried to bind this to the function in the constructor, but it still is undefined.

Also, when I put a breakpoint in my render function, I have a this.context.router, but it is undefined. How do I get my this correct in my handleLogin and how to I make sure that I have my router on the context and it is not undefined?

Answer 1

The best way to keep up with changes is to look through the Releases page.

In React Router versions that are > 1.0.0-beta3 and < 2.0.0-rc2, there is no context.router. Instead, you need to look for context.history.

If you use versions <= 1.0.0-beta3 or >= 2.0.0-rc2, the context.router is there. In short, what happened is it was removed in favor of history but then the maintainters decided it’s best to hide the History library API behind the router, so they brough back the router context in 2.0 RC2 and onward.