title: How to skip header and footer for certain routes in ReactJS?
body: <p>I have the following code which renders an app with a header and footer for all pages.</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>import React from 'react';
  import {
    Route,
    Switch
  } from 'react-router-dom';
  import { ConnectedRouter } from 'connected-react-router'
  import Layout from './components/Layout'
  import Home from './homeComponent';
  import Login from './loginComponent';
  import Dashboard from './dashboardComponent';
  
  const App = ({ history }) =&gt; {
    return (
      &lt;Layout&gt;
          &lt;ConnectedRouter history={history}&gt;
              &lt;Switch&gt;
                &lt;Route exact={true} path="/" component={Home} /&gt;
                &lt;Route path="/login" component={Login} /&gt;
                &lt;Route path="/dashboard" component={Dashboard} /&gt;
                ... more routes
                &lt;Route component={NoMatch} /&gt;
              &lt;/Switch&gt;
          &lt;/ConnectedRouter&gt;
      &lt;/Layout&gt;
    );
  };
  
  export default App;
  </code></pre>
  
  <p><strong>layout.js</strong></p>
  
  <pre><code>import Header from './headerComponent'
  import Footer from './footerComponent'
  import React, {Component} from 'react'
  
  class Layout extends Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;Header /&gt;
                  {this.props.children}
                  &lt;Footer /&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>What is the best way to skip rendering of the header and footer for certain pages like Home and Login routes?</p>