Javascript 作为道具从可重用组件传递路由

我有以下组件。我想让它可重用，这样我就可以在应用程序的不同部分使用它。。。有不同的路线

组件：

import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import { Link } from 'react-router-dom';

import './styles.scss';

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

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

const mapStateToProps = state => ({
  user: state.auth.user
});

const mapDispatchToProps = {};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ActionHeader);

import React，{Component，Fragment}来自'React'；
从'react redux'导入{connect}；
从“道具类型”导入道具类型；
从'react router dom'导入{Link}；
导入“./styles.scss”；
导出类ActionHeader扩展组件{
静态类型={
链接标题1:PropTypes.string，
链接标题2:PropTypes.string，
linkNumber1:PropTypes.number，
linkNumber2:PropTypes.number
};
render（）{
常量{linkTitle1，linkTitle2，linkNumber1，linkNumber2}=this.props；
返回(
{linkTitle1}
{linkNumber1}
{linkTitle2}
{linkNumber2}
);
}
}
常量mapStateToProps=状态=>({
用户：state.auth.user
});
常量mapDispatchToProps={}；
导出默认连接(
MapStateTops，
mapDispatchToProps
)（标题）；

---

我有两个问题。首先，我需要将什么类型的

PropType

传递给PropTypes。我还需要做什么？显然，现在它适用于硬编码路由。但我需要有动态，并被称为组件的道具，我将在…

中使用它。最简单的解决方案可能是添加两个

linkHref

道具，并在链接中使用它们

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

  ...

  <h5>{linkTitle1}</h5>
    <Link to={linkHref1}>
      <h4>{linkNumber1}</h4>
    </Link>
  </h5>

导出类ActionHeader扩展组件{
静态类型={
链接标题1:PropTypes.string，
链接标题2:PropTypes.string，
linkNumber1:PropTypes.number，
linkNumber2:PropTypes.number，
linkHref1:PropTypes.string，
linkHref2:PropTypes.string，
};
...
{linkTitle1}
{linkNumber1}

您是否遇到过任何问题？您能更清楚地了解什么是动态的吗？我想删除硬编码路由。并在那里添加一个道具。然后根据组件嵌套在哪个路由器中，我想在那里使用用户路由…这将在几个屏幕中重复使用…可能会尝试下面的答案…并让您知道…好的，它似乎有效，except重定向。它总是重定向到第一个。可能是路由器配置有问题。我会检查它并让您知道。。