title: How to prevent NavBar Menu to re render when navigating? React Router v4
body: <p>I'm fetching data from an API server to generate the NavBar Menu dynamically.</p>
  <p>Problem is that the menu re-renders each time I navigate through the pages.
  Can't figure out why it's happening. I tried different examples for <code>react-router</code> v4 like using  but the menu is always re-rendering.</p>
  <p>What pattern do you use to prevent NavBar Menu from re-rendering when generating the Menu dynamically?</p>
  <p>Here are the basic setup files:</p>
  <p>Main.js file:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { Route } from 'react-router-dom'
  import Home2 from './Home'
  import Head from './Head'
  import Rules from './Rules'
  
  const Main = () =&gt; (
    &lt;main&gt;
      &lt;Route  path='/' component={Head}/&gt;
      &lt;Route exact path='/' component={Home}/&gt;
      &lt;Route exact path='/rules' component={Rules}/&gt;
    &lt;/main&gt;
  )
  
  export default Main
  </code></pre>
  <p>Head.js file:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react'
  import Menu from 'semantic-ui-react'
  
  class Head extends Component {
    constructor(props) {
     super(props);
    }
  
    getInitialData() {
      //fetch data from server
    }
  
    componentWillMount() {
      this.getInitialData();
    }
  
    render() {
      return (
        &lt;header&gt;
          &lt;nav&gt;
            &lt;Menu&gt;
              {/* fetched data */}
          &lt;/nav&gt;
        &lt;/header&gt;
      )
    }
  }
  
  export default Head
  </code></pre>
  <p>Index.js file:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import { render } from 'react-dom'
  import Main from './components/Main'
  import { BrowserRouter } from 'react-router-dom'
  
  render((
    &lt;BrowserRouter&gt;
      &lt;Main /&gt;
    &lt;/BrowserRouter&gt;
  ), document.getElementById('root'));
  </code></pre>
  <p>Using React Router v3 this code works fine:</p>
  <pre class="lang-js prettyprint-override"><code>var Routes = (
    &lt;Router&gt;
      &lt;Route path=&quot;/&quot; component={Head}&gt;
        &lt;IndexRoute component={Home} /&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  <p>But in v4 I can't nest Routes.</p>