score:5

Accepted answer

there is a simple fix for your problem!

in index.js, change this line:

<route exact path="/" component={props => <sub {...props} />} />

with this:

<route exact path="/" render={props => <sub {...props} />} />

the difference between the component and render props with an anonymous function is that component={() => <yourcomponent />} will always re-render when the parent does. with render, though, re-rendering only happens when necessary.

i would recommend reading this article if you want to know more on the subject: https://tylermcginnis.com/react-router-pass-props-to-components/.

i have forked your codesandbox example here to see the difference: https://codesandbox.io/s/goofy-fermat-m01ct


Related Query

More Query from same tag