Dlaczego mój context.router jest niezdefiniowany w moim komponencie reagowania?

Question

Próbuję uzyskać dostęp do mojego router z poziomu mojego składnika i jest niezdefiniowany. Oto moja router:

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

Oto pojemnik:

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

I wreszcie komponent:

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; 

Po kliknięciu na przycisk login, to uderza handleLogin w pojemnik. W mojej handleLogin moja wartość wynosi undefined. Próbowałem powiązać this z funkcją w constructor, ale nadal jest to undefined.

Ponadto, gdy wstawiam punkt przerwania w mojej funkcji render, mam this.context.router, ale jest to undefined. Jak mogę uzyskać poprawną this w moim handleLogin i jak upewnić się, że mam mój router na context i to nie jest undefined?

Answer 1

Najlepszym sposobem na nadążanie za zmianami jest przejrzenie strony Releases.

W wersjach routera React, które są > 1.0.0-beta3 i < 2.0.0-rc2, nie ma context.router. Zamiast tego musisz poszukać context.history.

Jeśli używasz wersji <= 1.0.0-beta3 lub >= 2.0.0-rc2, jest tam context.router. W skrócie, co się stało, został usunięty na rzecz history, ale wtedy konserwatorzy zdecydowali, że najlepiej ukryć interfejs API biblioteki historycznej za routerem, więc odzyskują kontekst router w wersji 2.0 RC2 i nowszej.