Prevent re-render with every URI for React Router params

Question

Given the following route, if a URI query is added or changed (ie ?bar2=foo ) then MySpecialComponent will rerender even though it isn't set to capture these params:

<Route exact path="/foo/:bar" render={props => (<MySpecialComponent/>)}/>

This causes a massive amount of re-rendering when used throughout. How can the unwanted params be ignored? Ie to not triggering a re-render until the bit we care about changes ( /foo/:bar ).

Answer 1

I found using render on route along with passing the params myself to be the cleanest solution (to not pollute containers with router logic):

<Route exact path="/foo/:bar" render={props => (
  // Only pass needed props to avoid unnecessary re-render on ANY URI change
  <MySpecialComponent bar={props.match.params.bar}/>
)}/>