title: Same component used in multiple routes is being remounted react-router
body: <p>I created a simple react application. It has a header and three other components called welcome, feature 1 and feature 2.</p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react'
  import { render } from 'react-dom'
  import { BrowserRouter, Route } from 'react-router-dom'
  import App from './App';
  
  render((
    &lt;BrowserRouter&gt;
      &lt;Route path="/" component={App} /&gt;
    &lt;/BrowserRouter&gt;
  ), document.getElementById('root'));
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react'
  import Header from './Header'
  import Main from './Main'
  
  const App = () =&gt; (
    &lt;div&gt;
      &lt;Header /&gt;
      &lt;Main /&gt;
    &lt;/div&gt;
  )
  
  export default App
  </code></pre>
  
  <p>Header.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Header extends Component {
    componentDidMount() {
      APICall('/user')
    }
    render() {
      return (
        &lt;div&gt;I am header&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Main.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Route } from 'react-router-dom'
  import Welcome from './Welcome'
  import Feature1 from './Feature1'
  import Feature2 from './Feature2'
  
  export default class Main extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;Route exact path="/" component={Welcome} /&gt;
          &lt;Route path="/feature1" component={Feature1} /&gt;
          &lt;Route path="/feature2" component={Feature2} /&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>welcome.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Welcome extends Component {
    render() {
      return (
        &lt;div&gt;Welcome!&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Feature1.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Feature1 extends Component {
    render() {
      return (
        &lt;div&gt;I am Feature1&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Feature2.js</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default class Feature2 extends Component {
    render() {
      return (
        &lt;div&gt;I am Feature2&lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>Welcome, Feature1 and Feature2 are in different routes where as Header is common in all the routes. Say I have a user and I want to show the username on the header. I will make an API call to get the username in componentDidMount() life-cycle hook of header.</p>
  
  <p>Now if I change the route, I don't want the API call to be made again as the username is not going to change. And I thought that is how this was going to behave. As Header component is same in all the routes, I thought Header won't re-mount when I change the route. But that is not what is happening. It is remounting and making the API call again. How can I make sure that the API call is made only once?</p>