我目前正在项目上使用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
答案 0 :(得分:2)
您将.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
获得的已连接组件装饰。顺便说一下,这是避免装饰者的另一个原因!