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

问题

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?

回答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.

回答2:

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.

来源：https://stackoverflow.com/questions/32802766/why-is-my-context-router-undefined-in-my-react-component

标签

reactjs

redux