How to manually render specific component and exclude others within specific route - reactjs

Question

I have Header and Footer components, which are used for surrounding internal pages.
I also have a Login component, which appears when the user is not logged in. This component doesn't implement Header or Footer components.
The problem is that I can't prevent Header and Footer components from being rendered with Login component. I can't exclude Login component to be rendered alone.
I tried Switch tag, but didn't get it to work.
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Header from "./Header";
import Footer from "./Footer";
import Login from "./Login";
import manageCategories from "./manageCategories";
class App extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
return (
<div>
<BrowserRouter>
<div>
<Route exact path="/login" component={Login} />
<Header />
<Route exact path="/manage-categories" component={manageCategories} />
<Footer />
</div>
</BrowserRouter>
</div>
);
}
}
export default connect(null, actions)(App);

Answer 1

You should add a new component that is parallel to the login component to contain the Header and Footer components.
<Route path="/home" component={Layout}/>
<Route exact path="/login" component={Login}/>
and the Layout:
render() {
return <div>
<Header />
<Route exact path={this.props.match.path} component={Home} />
<Route path={`${this.props.match.path}/manageCategories`} component={manageCategories} />
<Route path={`${this.props.match.path}/other`} component={otherComponent} />
<Footer />
</div>
}