使用react-router的router.history.goBack触发类型规范警告，求PropTypes解决方法

这个警告的核心原因是你在定义router context的类型检查时犯了一个常见错误——要么使用了需要参数的PropTypes类型创建器（比如shape、arrayOf等）却没传参数，要么错误地用了布尔值类型来检查router这个对象类型的context。

下面是用PropTypes正确修复这个问题的步骤和代码示例：

1. 正确定义contextTypes #

首先确保你已经导入了prop-types包，然后为你的BackButton组件正确声明router context的结构：

import React from 'react';
import PropTypes from 'prop-types';

class BackButton extends React.Component {
  // 正确定义router context的类型结构
  static contextTypes = {
    router: PropTypes.shape({
      history: PropTypes.shape({
        goBack: PropTypes.func.isRequired
      }).isRequired
    }).isRequired
  };

  handleBackClick = () => {
    this.context.router.history.goBack();
  };

  render() {
    return (
      <button onClick={this.handleBackClick}>
        返回上一页
      </button>
    );
  }
}

export default BackButton;

如果你用的是函数式组件，同样需要正确设置contextTypes：

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { RouterContext } from 'react-router-dom';

const BackButton = () => {
  const router = useContext(RouterContext);

  const handleBackClick = () => {
    router.history.goBack();
  };

  return <button onClick={handleBackClick}>返回上一页</button>;
};

BackButton.contextTypes = {
  router: PropTypes.shape({
    history: PropTypes.shape({
      goBack: PropTypes.func.isRequired
    }).isRequired
  }).isRequired
};

export default BackButton;

2. 为什么之前的代码会触发警告？ #

举个例子，如果你之前错误地写了类似这样的contextTypes：

static contextTypes = {
  router: PropTypes.bool // 错误！router是对象，不是布尔值
  // 或者 router: PropTypes.shape() // 错误！shape需要传入结构对象作为参数
};

这种情况下，PropTypes的类型检查函数会返回布尔值，而React要求类型检查函数必须返回null（检查通过）或Error（检查失败），这就导致了你看到的警告。

额外推荐：React Router v4+的更优写法 #

如果你使用的是React Router v4及以上版本，更推荐使用useNavigate钩子来替代context，这样不需要手动处理context类型检查，代码更简洁：

import React from 'react';
import { useNavigate } from 'react-router-dom';

const BackButton = () => {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate(-1)}>
      返回上一页
    </button>
  );
};

export default BackButton;

内容的提问来源于stack exchange，提问作者Isak La Fleur