Warum ist mein context.router in meiner react-Komponente nicht definiert?

Question

Ich versuche, auf meine router von innerhalb meiner Komponente zuzugreifen, und es ist nicht definiert. Hier ist meine router:

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

Hier ist der Behälter:

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); 

Und schließlich die Komponente:

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; 

Wenn ich auf die Schaltfläche login klicken, es trifft den handleLogin in der Container. In meinem handleLogin ist mein this Wert undefined. Ich habe versucht, this an die Funktion in der constructor zu binden, aber es ist immer noch undefined.

Auch wenn ich einen Haltepunkt in meiner render Funktion habe, habe ich eine this.context.router, aber es ist . Wie bekomme ich meine this richtig in meinem handleLogin und wie stelle ich sicher, dass ich meine router auf der context habe und es nicht undefined ist?

Answer 1

Der beste Weg, mit Änderungen Schritt zu halten, ist durch die Releases Seite zu schauen.

In React Router-Versionen > 1.0.0-beta3 und < 2.0.0-rc2 gibt es keine context.router. Stattdessen müssen Sie nach context.history suchen. Wenn Sie die Versionen <= 1.0.0-beta3 oder >= 2.0.0-rc2 verwenden, ist der context.router da. Kurz gesagt, was passiert ist, wurde es zugunsten von history entfernt, aber dann die Wartungsleute entschieden, dass es am besten ist, die History-Bibliothek API hinter dem Router zu verstecken, so dass sie den router Kontext in 2.0 RC2 und weiter zurück.