ESLint React-Router v4 - How to validate Match params props?

Question

I'm using React-Router v4's Match object to pass down params to the next component. Where my Routing is like:

<Switch>
  <Route exact path="/" component={ExperimentListPage} />
  <Route path="/experiment/:experiment" component={ExperimentResultsPage} />
</Switch>

and my subcomponent looks like:

const ExperimentResultsPage = props => (
   <ExperimentResultsContainer experimentName={props.match.params.experiment} />
);

export default withRouter(ExperimentResultsPage);

And it all works as intended, however ESLint is really unhappy with me using match.params.experiment and it errors with [eslint] 'match.params.experiment' is missing in props validation (react/prop-types)

I saw in the React docs that I could use PropTypes.shape however my params object but I was hoping there is a better way especially because the Match object contains a lot of fields.

Is there a better way of adding your Match route object to the props validation? How would that look like? If not, am I missing some other approach that could help solve this?

Answer 1

I ran into something similar, eslint seems fine with only declaring what Im using as props and ignoring unused fields from match:

  match: PropTypes.shape({
    params: PropTypes.shape({
      experiment: PropTypes.string,
    }),
  }).isRequired,