title: React Router: Create header for specific routes
body: <p>Please have a look at the below routes.</p>
  <pre><code>import React from 'react'
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
  import {
    Home, 
    Contact, 
    Jobs, 
    Careers, 
    Dashboard, 
    Group
  } from '../container'
  
  // ?
  const Header = () =&gt; {
    return (&lt;div style={{backgroundColor: 'red'}}&gt; Test Custom header &lt;/div&gt;)
  }
  
  // 
  const Routes = () =&gt; (
    &lt;Router&gt;
      &lt;Switch&gt;
        &lt;Route exact path='/' component={ Home } /&gt;
        &lt;Route exact path='/contactus' component={ Contact }&gt;&lt;/Route&gt;
        &lt;Route exact path='/jobs' component={ Jobs } /&gt;
        &lt;Route exact path='/careers' component={ Careers } /&gt;
      
        {/** header */}
        {/** Render Header component (only once) only for the dashboard and group component  */}
        &lt;Route exact path='/dashboard' component={ Dashboard } /&gt;
        &lt;Route exact path='/group' component={ Group } /&gt;
      &lt;/Switch&gt;
    &lt;/Router&gt;
  )
  
  export default Routes
  </code></pre>
  <p>Here, <strong>I want to add a common header (Header component) only for the /dashboard and /group route and this header component should be rendered only once</strong>. I tried some approaches:</p>
  <ul>
  <li>Create HOC for these two routes and render Header component but in this case, the Header component will render twice when the user switches between the two routes.</li>
  <li>If I conditionally render the header only for these two routes, In this also Header rendering problem will not be resolved.</li>
  </ul>
  <p>Could you please suggest a good approach for this case?</p>