score:0

Accepted answer

the error is in how you pass the props. in your example,

<route path="/cats" render={ <cats data={this.state.cats} /> } />

the data prop would essentially be ignored. however, if you pass it like this:

<route
  path="/cats"
  render={(props) => <cats {...props} data={this.state.cats} />}
/>

you'll have access to it. however, to keep things simpler, might i suggest moving the actual data fetch function inside the component that needs it? this way, if you're fetching let's say 20 different things, like cats, dogs, mice, depending on your setup, you'd render block the entire application for data you may or may not need.

score:2

your code looks fine, except that the render prop on route needs to be a function.

 <route path="/cats" render={ () => <cats data={this.state.cats} /> } /> 

if you don't need it to be a function, you can use component instead:

 <route path="/cats" component={ <cats data={this.state.cats} /> } /> 

Related Query

More Query from same tag