How to skip header and footer for certain routes in ReactJS?

Yeah i know a bit late .

Visual studio 2019

import React from 'react';
import { Container } from 'reactstrap';
import NavMenu from '../components/NavMenu';

export default props => (
    <div>
        {window.location.pathname !== '/login' ? <NavMenu /> : null}        
        <Container>
            {props.children}
        </Container>
    </div>
);

i hope somebody helps out there.. !!! Happy coding

Use render

<ConnectedRouter history={history}>
  <Switch>
    <Route path="/dashboard" render={props => <Layout><Dashboard {...props} /></Layout>} />
    <Route path="/login" component={Login} />
  </Switch>
</ConnectedRouter>

I'd recommend creating two layouts with their own header and footers and a private route:

Public Layout

export const PublicLayout = (props) => <div>
<PublicHeader/>
  <Switch>
    <Route exact path="/" component={HomePage}/>
    <Route exact path='/signin' component={SigninForm} />
    <Route exact path='/signup' component={Signup} />         
  </Switch>
<PublicFooter/>

Protected Layout

export const ProtectedLayout = (props) => <div>
<ProtectedHeader/>
 <Switch>
   <PrivateRoute exact path='/app/dashboard' component={Dashboard} />
   <Route component={NotFound} />
 </Switch>
<ProtectedFooter/>

Define high-level routes in app.js:

export default () => {
  return <div>
    <Switch>
      <Route path='/app' component={ProtectedLayout} />
      <Route path='/' component={PublicLayout} />
    </Switch>
  </div>
}

Define PrivateRoute:

export default ({component: Component, ...rest}) => (
  <Route {...rest} render={props => (
    window.globalState.isAuthenticated() ? (
      <Component {...props} />
    ) : (
      <Redirect to={{
        pathname: '/signin',
        state: {from: props.location}
      }} />
    )
  )} />
)

I made some solution while solving the problem.

First You can wrap the Switch in a website header and footer

<BrowserRouter>

    <WebsiteHeader />

    <Switch>
        <Route/>
        <Route/>
        <Route/>
    </Switch>

    <WebsiteFooter/>

<BrowserRouter>

then inside the header or footer wrap the components using withRouter from 'react-router-dom' so you can access the routes props

const WebsiteHeader = props => {
    if (props.location.pathname == "/register") return null;
    return (
        <Fragment>
            <DesktopHeader {...props} />
            <MobileHeader {...props} />
        </Fragment>
    );
};

export default withRouter(WebsiteHeader);