尝试使用router.history.goBack与react-router时获得警告

Posted 2021-04-16

我得到这个警告：

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

这是我的代码（我想重用的BackButton组件）

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;

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

答案

propTypes的示例：

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;

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

另一答案

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

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>
    )
  }
}