title: Prevent header menu to re render when navigating through page - reactjs
body: <p>I would like to ask if its possible not to re render the header component when navigating through page, because when I do console.log() in the header component it always fire up when navigating through page. Here's is my code:</p>
  
  <p>// Route.jsx</p>
  
  <pre><code>&lt;Route component={HeroesPage}&gt;
      &lt;Route path="/reactjs" component={HeroesComponent}&gt;&lt;/Route&gt;
      &lt;Route path="/reactjs2" component={HeroesCreateComponent}&gt;&lt;/Route&gt;
  &lt;/Route&gt;
  </code></pre>
  
  <p>// HeroesPage.jsx</p>
  
  <pre><code>import React from 'react';
  
  import Header from "components/common/Header.jsx";
  class HeroesPage extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Header /&gt;
                  { this.props.children }
              &lt;/div&gt;
          );
      }
  }
  
  export default HeroesPage;
  </code></pre>
  
  <p>// Header.jsx</p>
  
  <pre><code>import React from "react";
  import { Link } from 'react-router';
  
  class Header extends React.Component {
      componentDidMount(){
          console.log('header loaded');
          // If I will add an api call here, it will fetch to the server everytime I navigate to the page
      }
      render(){
          return(
              &lt;ul className="nav nav-tabs"&gt;
                  &lt;li&gt;&lt;Link to="/reactjs"&gt;Reactjs 1&lt;/Link&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;Link to="/reactjs2"&gt;Reactjs 2&lt;/Link&gt;&lt;/li&gt;
              &lt;/ul&gt;
          );
      }
  }
  
  
  export default Header;
  </code></pre>