无法使用react-router-redux访问context.router

Question

我目前在一个项目上使用react-router-redux，除了我无法弄清楚如何访问react-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始终是未定义的，我尝试了很多失败的尝试

即时通讯使用react 0.14.6，redux 3.0.2，react-router 2.0.0，react-router-redux 4.0.0

Answer 1

您将.contextTypes放置在connect()返回的组件上，而不是您自己的组件上。 这就是为什么上下文无法用于您的组件的原因。

尝试以下方法：

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)

请注意，我们首先指定contextTypes ，然后导出连接的组件，而不是将contextTypes分配给从@connect装饰器获取的已连接组件。 顺便说一句，这是避免装饰的另一个原因！