title: Hide App Elements React
body: <p>I have an <code>&lt;App/&gt;</code> component which renders for any page on my site:</p>
  
  <pre><code>const App = () =&gt; (
    &lt;div&gt;    
      &lt;Header /&gt;
      &lt;Main /&gt;
      &lt;Footer /&gt;
      &lt;Subfooter /&gt;
      &lt;SubfooterLegal /&gt;
    &lt;/div&gt;
  )
  export default App;
  </code></pre>
  
  <p>The problem I'm having now is that I have a Component (page) which doesn't include any of the components within <code>&lt;App /&gt;</code> aside from <code>&lt;Main /&gt;</code> (which is the router).</p>
  
  <p>I'm puzzled on how to do this, since <code>App.js</code> is the parent component of all components. My only idea of how to do this (possibly) is that when a user clicks a <code>&lt;Link /&gt;</code> to the aforementioned component, I could add <code>setState</code> (maybe?) to <code>App.js</code> and change it to something like <code>hideAppComponents = true</code> and then hide the appropriate components. I know that in this case I would have to make <code>&lt;App /&gt;</code> <code>extends Component</code> since it would then be stateful. </p>
  
  <p>Are there any suggested approaches for a use case like this?</p>