Excluding <Header /> component on a specific page with react-router

The withRouter Higher-order-Component provided by the react-router package will give you access to the location object. Once you have that you can conditionally render the header by short-circuiting.

import {withRouter} from 'react-router'

const App = ({location}) => (
  <div>
    {location.pathname !== '/exclusion-path' && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

export default withRouter(App)

or to exclude on multiple paths...

const exclusionArray = [
  '/path-one',
  '/another-path',
]

const App = ({location}) => (
  <div>
    {exclusionArray.indexOf(location.pathname) < 0 && <Header/>}
    <Switch>
      ...
    </Switch>
  </div>
)

If you're doing anything serious I'd recommend using the context api and short-circuit on a value provided by context. If this is the case and you need some direction I'd be happy to explain it to you.

P.S. If you want to do it with the alpha Hooks API I'll get really excited.

EDIT: To address commont.

Move your Router outside of the App component.

import {BrowserRouter as Router} from 'react-router-dom'
import ReactDOM from 'react-dom'

ReactDOM.render(
  <Router>
    <App/>
  </Router>,
  document.getElementById('render-target')
)

Had the exact same requirement in my last project and I went with the approach of splitting the header out into its own component and the using React Fragments. Idiomatic!

import React, { Fragment } from 'react'
// ...

const App = () => (
  <div>
    <Switch>
      <Route path='/no-header-route' component={NoHeaderComponent} />   // Route without header
      <Fragment>            // This is the key
        <Header/>           // Header is in its own component
        <Route path='/route-1' component={Comp1}/>  // Route with header
        <Route path='/route-2' component={Comp2}/>  // Route with header
      </Fragment>
    </Switch>
  </div>
)