React + PropTypes与ESLint错误：如何验证路由回调的Props？

这问题我之前也碰到过，ESLint对PropTypes的校验确实严格，不过咱们可以通过把重定向逻辑抽成独立组件并添加PropTypes验证来解决，具体步骤如下：

1. 确保安装了PropTypes包 #

如果你的项目还没装prop-types（React 15.5+之后PropTypes从核心库分离），先执行安装：

npm install prop-types
# 或者使用yarn
yarn add prop-types

2. 抽离重定向逻辑为独立组件 #

把原来写在render里的匿名箭头函数改成具名组件，这样才能给它附加PropTypes验证：

import PropTypes from 'prop-types';
import { Redirect } from 'react-router-dom';

// 定义专门的尾斜杠重定向组件
const TrailingSlashRedirect = (props) => {
  return <Redirect to={`${props.location.pathname}/`} />;
};

3. 添加PropTypes类型验证 #

给组件声明props的类型，完全匹配React Router传递给render函数的props结构：

TrailingSlashRedirect.propTypes = {
  location: PropTypes.shape({
    pathname: PropTypes.string.isRequired,
  }).isRequired,
};

这里我们明确校验了location是一个必填对象，且必须包含必填的字符串类型pathname属性，完美符合ESLint的校验要求。

4. 更新Route组件的render属性 #

将Route里的render值替换成我们定义好的组件：

<Route 
  path="/:url*" 
  exact 
  strict 
  render={TrailingSlashRedirect} 
/>

这样修改后，ESLint就会识别到我们已经显式完成了props的类型验证，不会再抛出相关错误。同时把逻辑抽成独立组件也让代码更清晰、更易于维护。

内容的提问来源于stack exchange，提问作者Aerendir