title: How to use different Header for the different component in react
body: <p>This is my main <code>app.js</code> file having all the routes. Now There are two <code>Header</code> components. Now I need to use  <code>Header1</code>
  with only the <code>MyProfile</code> and <code>Home</code> components and <code>Header2</code> with <code>Marketing</code>. How can I do that with best approach?</p>
  
  <pre><code>const App = (props) =&gt; (
    &lt;Provider store={store}&gt;
      &lt;Layout&gt;
        &lt;Header1 {...props}/&gt;
        &lt;Header2 {...props}/&gt;
        &lt;Router&gt;
          {/*&lt;PrivateRoute path="/app/profile" component={Profile} /&gt;*/}   
          &lt;Marketing path="/app" {...props}/&gt;
          &lt;PrivateRoute  path="/app/my-profile" component={MyProfile} location={props.location}/&gt;
          &lt;PrivateRoute  path="/app/home" component={Home} location={props.location}/&gt;
        &lt;/Router&gt;
      &lt;/Layout&gt;
    &lt;/Provider&gt;
  )
  
  export default App
  </code></pre>