React Router context.router 未定义错误
我在使用 class Example extends React.Component {
constructor(props) {
super(props);
this.context.router; // undefined
this.context.router.push('/'); // error
props.history; // deprecated
}
}
不得已只能用即将被抛弃的 其他也有人碰到了这个问题,于是在react-router的GitHub上提了一个Issue #1059 听说要改成这样: class Example extends React.Component {
constructor(props,context) {
super(props,context);
this.context.router; // it works
}
}
Example.contextTypes = {
router: React.PropsTypes.func.isRequired
}
真是让人感觉非常不优雅,控制台又打出了一行Warning,尽管真的 context.router 出现了。 我要报警了……还是算了,自己踩坑。 contextTypes 是React里面的一个类型验证的机制,用于验证 context 的属性的类型。 React 对 context 的态度是,只要没有在 contextTypes 中声明的属性一律不准加入 context,但没有通过类型验证的只会在控制台打出一行 Warning。 即,如果你不显式声明这个 contextTypes,React Router就没有办法在 context 中加入 router 对象,然后就会出现 this.context.router 未定义的现象。 那么,既然上面的 Example.contextTypes.router 已经声明了,为什么还会报Warning呢? 是因为没有通过contextTypes的验证。 实际上react-router 传进来的这个router对象是一个Object类型,然而react-router却要求是一个 function,自相矛盾。 大概是因为这个 那么我们来跳过这个验证: class Example extends React.Component {
constructor(props,context);
this.context.router; // it works
}
}
Example.contextTypes = {
router: Object
}
OK,没有Warning 更没有 Error!
参考资料:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |