2016-04-01 3 views
0

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.Konnte nicht auf context.router mit react-router-redux zugreifen

@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

+0

Ist Ihre "Beratungs" -Komponente in der Router-Komponente verpackt? – Andreyco

+0

Ja, ich habe meine Provider-Komponente an der Spitze, dann meine Router-Komponente und schließlich meine Consultation-Komponente –

+0

Warum willst du auf context.router zugreifen? Sie können den aktuellen Router-Status über -> ownProps.location.query.filter aufrufen und Navigationsereignisse über -> store.dispatch (push ('/ your-route')) ausgeben, wenn Sie die richtige Middleware-Einrichtung haben - -> routerMiddleware – deowk

Antwort

2

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!

+0

Danke! Zuerst dachte ich, dass es nicht die richtige Antwort war, weil ich versuchte, die statischen Eigenschaften von ES7 zu verwenden, aber babel tat im Grunde das, was ich vorher in meinem Code getan hatte ... also habe ich deine Lösung versucht und es funktioniert :) Redux ist erstaunlich, btw, danke auch dafür :) –

+0

Korrigieren Sie mich, wenn ich hier falsch liege, aber alternativ könnten Sie 'importieren {withRouter} von 'react-router'' und dann' Consultation = withRouter (Beratung) 'vor dem Durchlaufen zu verbinden. Dies würde den Router unter 'props.router' verfügbar machen. Siehe Dokumentation hier https://github.com/ReactTraining/react-router/blob/master/docs/API.md#withroutercomponent-options –

Verwandte Themen