title: React router render prop route always re-renders components
body: <p>I am using React Router and because a function that takes a components needs need to be passed into the route, am rendering the components with a render prop. However, passing in a route as a render prop always results in the component re-rendering. I have tried all the possible lifeCycle hooks, such as shouldComponentUpdate and ComponentDidUpdate, but nothing prevents the component from re-rendering. This route structure is shown below:</p>
  
  <p>Route1: </p>
  
  <pre><code>&lt;Route
    path='/dashboard'
    render={() =&gt; dashboardOperator(&lt;Dashboard /&gt;)}
  /&gt;
  </code></pre>
  
  <p>Conversely, if I just pass the component in the traditional way, it does not trigger an automatic re-render. </p>
  
  <p>Route2:</p>
  
  <pre><code> &lt;Route
       path="/dashboard"
       component={DashboardComponent}
   /&gt;
  </code></pre>
  
  <p>However, this routing approach is not effective because it does not allow the function to be passed into the route. </p>
  
  <p>Since lifecycle hooks do not appear to be effective in preventing Route1 (the render prop approach) from re-rendering the component, how can I use the render prop (or another approach) and also prevent unnecessary component re-renders?</p>