title: React: Hide a Component on a specific Route
body: <p>New to React: </p>
  
  <p>I have a <code>&lt;Header /&gt;</code> Component that I want to <strong>hide only when the user visit a specific page</strong>. </p>
  
  <p>The way I designed my app so far is that the <code>&lt;Header /&gt;</code> Component is <strong>not re-rendered when navigating</strong>, only the page content is, so it gives a really smooth experience.</p>
  
  <p>I tried to re-render the header for every route, that would make it easy to hide, but I get that ugly re-rendering glitch each time I navigate.</p>
  
  <p><strong>So basically, is there a way to re-render a component only when going in and out of a specific route ?</strong></p>
  
  <p>If not, what would be the <strong>best practice</strong> to achieve this goal ?</p>
  
  <p>App.js:</p>
  
  <pre><code>class App extends Component {
  
    render() {
      return (
        &lt;BrowserRouter&gt;
          &lt;div className="App"&gt;
            &lt;Frame&gt;
              &lt;Canvas /&gt;
              &lt;Header /&gt;
              &lt;Main /&gt;
              &lt;NavBar /&gt;
            &lt;/Frame&gt;
          &lt;/div&gt;
        &lt;/BrowserRouter&gt;
      );
    }
  }
  </code></pre>
  
  <p>Main.js:</p>
  
  <pre><code>const Main = () =&gt; (
    &lt;Switch&gt;
      &lt;Route exact activeClassName="active" path="/" component={Home} /&gt;
      &lt;Route exact activeClassName="active" path="/art" component={Art} /&gt;
      &lt;Route exact activeClassName="active" path="/about" component={About} /&gt;
      &lt;Route exact activeClassName="active" path="/contact" component={Contact} /&gt;
    &lt;/Switch&gt;
  );
  </code></pre>