Скрыть заголовок на странице входа

Я хочу скрыть панель заголовка на странице входа в систему, и после успешного входа она должна появиться на других страницах. Я пытался создать класс в CSS, чтобы он скрыл заголовок, но я не смог найти способ отключить его после успешный вход

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;

CSS:

.hide{
  display: none;
}

Вот как страница перенаправляется со страницы аутентификации на домашнюю страницу. Страница входа находится не в том же файле, что и страница маршрутизатора:

    Login = () => {
    const email = this.refs.email.value;
    const password = this.refs.password.value;
    console.info(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.info(err);
      this.setState({err: err});
    });
    firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    console.info(user.uid);
 this.props.history.push('/Home')
  }
});
}