尝试将router.history.goBack与react-router一起使用时收到警告

Question

我收到以下警告：

警告：BackButton：上下文router的类型规范无效;类型检查器函数必须返回null或Error，但返回布尔值。您可能忘记将参数传递给类型检查器创建者(arrayOf、instanceOf、objectOf、oneOf、oneOfType 和 shape 都需要参数)。

这是我的代码(这是我想重用的后退按钮组件)

import React, { Component } from "react";
import { Button } from 'antd';
class BackButton extends Component {
static contextTypes = {
router: () => true,
}
render() {
return (
<Button
onClick={this.context.router.history.goBack}>
Back
</Button>
)
}
}
export default BackButton;

如果可能的话，我最好使用 PropType，但我不知道如何......

Answer 1

propType 的例子：

import React, { Component } from "react";
import { Button } from 'antd';
import PropTypes from 'prop-types'; // You need to add this dependency
class BackButton extends Component {
static contextTypes = {
router: PropTypes.object
}
render() {
return (
<Button
onClick={this.context.router.history.goBack}>
Back
</Button>
)
}
}
export default BackButton;

你可以在这里阅读更多关于propType的信息：https://reactjs.org/docs/typechecking-with-proptypes.html。

Answer 2

路由器的contextTypes需要像PropTypes.object.isRequired一样定义prop-type，首先使用

npm install -S prop-types

并像导入一样

import PropTypes from 'prop-types'

并将上下文定义为

static contextTypes = {
router: PropTypes.object.isRequired
}

所以你的代码看起来像

import PropTypes from 'prop-types'
class BackButton extends Component {
static contextTypes = {
router: PropTypes.object.isRequired
}
render() {
return (
<Button
onClick={this.context.router.history.goBack}>
Back
</Button>
)
}
}