处理组件中通过 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>

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

出于这个原因，我将 propTypes 定义为：

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

但感觉就像我写的样板代码比我可能需要的要多。我的问题是，是否有更好的方法来定义我的组件中的 propTypes 以避免 linter 错误？此外，这种解决方案似乎不可持续，例如，如果 props.match 属性更改它将中断。或者我这样做正确吗？

提前致谢。

Answer 1

您的代码没问题，但您也可以将 proptypes 定义为 object。

match: PropTypes.object.isRequired

如果有一天你需要其他道具，比如match, location, history. 你可以这样定义。

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