Handling parameters passed through react-router in component

Question

So, in react-router v4, my Route looks like this:

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

I'm passing an optional 'id' parameter to my Suppliers component. This is no problem.

For posterity, this is my Link: <Link to="/suppliers/123">Place Order</Link>

Then, in my component, I refer to the parameter as such: <p>{this.props.match.params.id}</p>

This works, but my linter gives me the following error: [eslint] 'match' is missing in props validation (react/prop-types)

For this reason, I've defined the propTypes as such:

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

But it feels like I'm writing more boilerplate code than I probably require. My question is, Is there a better way to define my propTypes in my component so as to avoid the linter error? Also, this solution seems unsustainable if, for instance, the props.match property changes it will break. Or am I doing this correctly?

Thanks in advance.

Answer 1

Your code is okay but you can also define the proptypes as object.

match: PropTypes.object.isRequired

If one day you need other props such match, location, history. you can define it this way.

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

Answer 2

In order to cover these cases regarding match (and history) to please linters, you can declare your prop-types like so:

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

This was the solution that worked best for us in our project.