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

user_5428205 0
Viewed 3155

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?

react-router-v4 eslint reactjs
2 Answers

In a case whereby the component expects an object which has different keys of different shapes, the best way to go about that is to use PropTypes.any inside objectOf as below:

 match: PropTypes.objectOf(PropTypes.any),
user_82604830
Related