Perché il mio context.router non è definito nel mio componente di reazione?

Question

Sto tentando di accedere al mio router dal mio componente e non è definito. Qui è la mia router:

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

Ecco il contenitore:

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

E infine il componente:

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; 

Quando clicco sul pulsante login, colpisce il handleLogin nel contenitore. Nel mio handleLogin, il mio valore this è undefined. Ho provato a collegare this alla funzione nello constructor, ma è ancora undefined.

Inoltre, quando inserisco un punto di interruzione nella mia funzione render, ho un this.context.router, ma è undefined. Come faccio a ottenere il mio this corretto nel mio handleLogin e come posso essere sicuro di avere il mio router su context e non è il undefined?

Answer 1

Il modo migliore per tenere il passo con le modifiche è controllare la pagina Releases.

Nelle versioni di React Router che sono > 1.0.0-beta3 e < 2.0.0-rc2, non c'è context.router. Invece, è necessario cercare context.history.

Se si utilizzano le versioni <= 1.0.0-beta3 o >= 2.0.0-rc2, lo context.router è lì. In breve, ciò che è accaduto è stato rimosso a favore di history ma poi i maintainters hanno deciso che è meglio nascondere l'API della libreria Cronologia dietro il router, in modo da recuperare il contesto router in 2.0 RC2 e successivi.