9

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?

2 Answers 2

11

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.

2
  • 2
    I have a hunch that this advice is outdated. I'm using react-router version 2.0.0-rc5 and I'm getting warnings that indicate that the opposite is true. It is pushing me to use context.router instead of context.history. Can you please shed some light on this? Thanks!
    – Ryan Shea
    Jan 25, 2016 at 7:18
  • 1
    @Ryan had this same feeling and can verify that context.history is deprecated. context.router is preferred. For me I simply had to replace history with router in my contextTypes.
    – sighrobot
    Feb 3, 2016 at 19:01
1

I had the same problem, I want to redirect to the login page from the component that need authentication to open.

I used this.context.router.push('/login') it didnot worked for me.

We could reach the path via props so i coded it this.props.history.push('./login') since I work with redux store it will update the path in props and it will redirect to home page.

componentWillMount() {
        if(!this.props.isAuthenticated){
            // redirect
            this.props.history.push('/login');
        }
    }

when the component is open (wrapped by high order component) it will check if user is authenticated. If it is not authenticated it will redirect to homepage.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.