React Router4深层对象props.match.params.type的PropTypes校验方法

你现在的核心问题是propTypes的校验路径没对应上——你直接校验了props.type，但实际type藏在props.match.params这个深层嵌套结构里。不过放心，PropTypes的.shape()方法完全支持深层嵌套的对象校验，下面给你一步步梳理正确的写法：

首先，修正你的propTypes定义，要逐层描述嵌套对象的结构：

import PropTypes from 'prop-types';

const Register = (props) => { 
  console.dir(props) 
  console.log(props.match.params.type) 
  return ( 
    <> 
      <RegisterMeta /> 
      <section className="register"> Register </section> 
    </> 
  ) 
} 

// 正确的深层结构校验写法
Register.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      type: PropTypes.string.isRequired
    }).isRequired // 如果路由规则里params是必填项，加上这个标记
  }).isRequired // match是React Router路由组件必传的，所以标记为必填
} 

export default React.memo(Register)

为什么要这么写？ #

• .shape()本身就是用来描述对象类型的属性结构的，你嵌套多少层对象，就可以嵌套多少个.shape()来对应
• 每层的.isRequired按需添加：比如match是React Router匹配路由后一定会传入的，所以标记为必填；如果你的路由规则是/register/:type这种带必填参数的，那params也得标记为必填，避免出现params为undefined的情况。

优化小技巧：复用PropTypes片段 #

如果你的项目里多个路由组件都需要校验类似的match结构，可以把这些PropTypes抽成可复用的片段，减少重复代码：

// 定义可复用的路由参数结构
const RouteParamsPropType = PropTypes.shape({
  type: PropTypes.string.isRequired
});

// 定义可复用的match结构
const RouteMatchPropType = PropTypes.shape({
  params: RouteParamsPropType.isRequired
});

// 组件里直接引用即可
Register.propTypes = {
  match: RouteMatchPropType.isRequired
}

这样后续其他组件需要校验相同结构的match时，直接复用定义好的片段就行，维护起来更省心。

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