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

[Dimomir]

Hi there!

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 for my params object but I was hoping there is a better way especially because the Match is a large complex object with 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?

P.S. I've already asked this on StackOverflow but didn't get any answers there. Let me know if there's a better place to ask this.

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!