React可复用组件路由传参：PropTypes类型及改造方案咨询

问题一：路由参数的PropTypes类型 #

路由路径本质是字符串格式，所以你应该用PropTypes.string来定义其类型。如果这个路由是组件必须依赖的属性，建议加上.isRequired约束，确保父组件一定会传入有效路由，避免出现无意义的空链接。

问题二：将硬编码路由改为动态props传入的操作步骤 #

除了类型定义，你需要完成以下几个关键操作：

• 新增路由props参数：在组件的props中添加linkPath1和linkPath2，用来接收外部传入的动态路由地址
• 替换硬编码路由：把<Link>组件的to属性从固定字符串改为对应props值
• 更新PropTypes校验：为新增的路由props补充类型定义，保证传入值的合法性
• 清理冗余代码：原组件中的mapStateToProps并没有实际用到user状态，完全可以移除redux的connect包裹，让组件更轻量化（如果后续不需要redux状态支持的话）
• 可选：设置默认props：给路由参数设置默认值，防止父组件未传入时组件出错，提升健壮性

修改后的完整组件代码 #

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import './styles.scss';

export class ActionHeader extends Component {
  static propTypes = {
    linkTitle1: PropTypes.string.isRequired,
    linkTitle2: PropTypes.string.isRequired,
    linkNumber1: PropTypes.number.isRequired,
    linkNumber2: PropTypes.number.isRequired,
    linkPath1: PropTypes.string.isRequired,
    linkPath2: PropTypes.string.isRequired
  };

  // 可选：设置默认路由，作为 fallback 方案
  static defaultProps = {
    linkPath1: '/management/users',
    linkPath2: '/management/accounts'
  };

  render() {
    const { linkTitle1, linkTitle2, linkNumber1, linkNumber2, linkPath1, linkPath2 } = this.props;
    return (
      <Fragment>
        <div className="d-flex justify-content-end">
          <div className="link-box">
            <h5>{linkTitle1}</h5>
            <Link to={linkPath1}>
              <h4>{linkNumber1}</h4>
            </Link>
          </div>
          <div className="link-box px-4">
            <h5>{linkTitle2}</h5>
            <Link to={linkPath2}>
              <h4>{linkNumber2}</h4>
            </Link>
          </div>
          <i className="fas fa-ellipsis-h fa-lg justify-content-center" />
        </div>
      </Fragment>
    );
  }
}

export default ActionHeader;

组件复用示例 #

现在你可以在应用的任意位置复用这个组件，传入不同的路由和业务数据：

// 用户管理页面使用
<ActionHeader
  linkTitle1="总用户数"
  linkNumber1={120}
  linkPath1="/management/users"
  linkTitle2="活跃用户数"
  linkNumber2={85}
  linkPath2="/management/active-users"
/>

// 账户管理页面使用
<ActionHeader
  linkTitle1="总账户数"
  linkNumber1={200}
  linkPath1="/management/accounts"
  linkTitle2="VIP账户数"
  linkNumber2={30}
  linkPath2="/management/vip-accounts"
/>

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