title: Set a common header for certain components in react
body: <p>I'm developing a reactjs app and there are several components in the app. For example initially the login page is displayed and when logged in it will navigate to home component. So in home component i need to have a common header menu for each page inside the home component. What is the best approach to do this? 
  Do i create a HeaderMenu component and import it to each and every other component inside home or is there a way to just import it once for the components inside home ?</p>
  
  <p>For example </p>
  
  <p>Component A</p>
  
  <pre><code> &lt;div className="body_clr"&gt;
  
          &lt;NavigationTop
            componentURL={this.props.location.pathname}
            reqUserId={reqUserId}
          /&gt;
  
          &lt;Home/&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Component B</p>
  
  <pre><code>&lt;div className="body_clr"&gt;
  
          &lt;NavigationTop
            componentURL={this.props.location.pathname}
            reqUserId={reqUserId}
          /&gt;
  
          &lt;UserManagement/&gt;
  
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here <code>NavigationTop</code> is my header menu and i have imported it to all the components that i need this and not included it where i do need this (Ex: Initial login page).</p>
  
  <p>Is this the correct approach ?</p>