hide header on Login page

i want to hide the header bar in the Login page and after a succesful login it should appear in the other pages i tried to make a class in the css so it hides the header but i couldn't find a way to disable it after a succesful login

import React, { Component } from 'react';
import './App.css';
import Authen from './Pages/Authen';
import Home from './Pages/Home';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';
class App extends Component {


  render() {
    return (

  <div className="app">

    <Router>
    <div>
       <div className="hide">
      <ul>
        <li><Link to="/Home">Home</Link></li>
      </ul>
      </div>
      <Route exact path="/" component={Authen}/>
      <Route path="/Home" component={Home}/>
    </div>
  </Router>

  </div>

    );
  }
}

export default App;

the css :

.hide{
  display: none;
}

And this is how the page redirects from Authentication page to the home page. The login page is not in the same file as the router page :

    Login = () => {
    const email = this.refs.email.value;
    const password = this.refs.password.value;
    console.log(email,password);

    const auth = firebase.auth();

    const promise = auth.signInWithEmailAndPassword(email, password);

    promise.then(user =>{
      var lout = document.getElementById('Login');

      lout.classList.remove('hide');
    });

    promise.catch(e =>{
      var err = e.message;
      console.log(err);
      this.setState({err: err});
    });
    firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.log(user.uid);
 this.props.history.push('/Home')
  }
});
}

thank you for your time :)