处理参数通过组件中的React-Router

Question

所以，在React-Router V4中，我的路线看起来像这样：

      <Route path="/suppliers/:id?" component={Suppliers} />

我将可选的" ID"参数传递给供应商组件。这没问题。

对于后代，这是我的链接： <Link to="/suppliers/123">Place Order</Link>

然后，在我的组件中，我指的是参数： <p>{this.props.match.params.id}</p>

这有效，但是我的衬里给了我以下错误： [eslint] 'match' is missing in props validation (react/prop-types)

因此，我已经定义了这些主体：

Suppliers.propTypes = {
  match: PropTypes.shape({
    params: PropTypes.shape({
      id: PropTypes.number,
    }).isRequired,
  }).isRequired,
};

，但感觉就像我正在编写比我可能需要的更多的样板代码。我的问题是，有没有更好的方法来定义我的组件中的预兆以避免衬里错误？另外，如果例如，props.match属性会破坏，则该解决方案似乎是不可持续的。还是我做得正确？

预先感谢。

Answer 1

您的代码还可以，但您也可以将Proptypes定义为对象。

match: PropTypes.object.isRequired

如果有一天您需要其他道具，例如match, location, history。您可以以这种方式定义它。

Suppliers.propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

Answer 2

为了涵盖有关匹配（和历史记录）的这些案例以取悦衬里，您可以声明自己的道具类型：

     Suppliers.propTypes = {
      match: PropTypes.shape().isRequired,
      }).isRequired,
    };

这是我们项目中最适合我们的解决方案。