Konnte nicht auf context.router mit react-router-redux zugreifen

Question

Ich verwende derzeit react-router-redux auf einem Projekt und alles funktioniert gut bis auf die Tatsache, dass ich nicht herausfinden kann, wie man auf die reactive- Router-Router.

@connect((state, props) => { 
    return { 
       notification:state.getIn(['_display', 'notification']), 
       loadingScreen:state.getIn(['_display', 'loadingScreen']), 
       route:props.location.pathname 
      }; 
}) 
export default class Consultation extends React.Component { 

    constructor(props,context) { 
     super(props, context); 
     console.log(context.router); 
    } 

    componentDidMount(){ 
     const { router } = this.context; 
     ..... 
    } 

    render(){ 
    .... 
    } 
} 
Consultation.contextTypes = { 
    router: React.PropTypes.object.isRequired, 
    store:React.PropTypes.object 
}; 

this.context.router ist immer undefiniert, und ich habe erfolglos

mit einer Menge Dinge versuchen

im react 0.14.6, redux 3.0.2, reagiert-Router 2.0.0, reagiert-Router -redux 4.0.0

Answer 1

Sie setzen .contextTypes auf die Komponente, die von connect() anstelle von Ihrer eigenen Komponente zurückgegeben wird. Aus diesem Grund wird der Kontext für Ihre Komponente nicht verfügbar gemacht.

Versuchen Sie stattdessen:

class Consultation extends React.Component { 
    constructor(props, context) { 
     super(props, context); 
     console.log(context.router); 
    } 

    componentDidMount(){ 
     const { router } = this.context; 
     ..... 
    } 

    render(){ 
    .... 
    } 
} 
Consultation.contextTypes = { 
    router: React.PropTypes.object.isRequired, 
    store:React.PropTypes.object 
} 

export default connect(...)(Consultation) 

Bitte beachte, dass wir erstecontextTypes angeben, und exportieren Sie die angeschlossene Komponente, anstatt zuweisen contextTypes zu einem bereits angeschlossenen Komponente, die Sie aus dem @connect Dekorateur erhalten. Das ist übrigens ein weiterer Grund, Dekorateure zu meiden!