在登录页面上隐藏标题

Question

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')
  }
});
}

Answer 1

To me, your code is a little bit unclear because we can't see where you declare your header. I can see a couple of way you can deal with your situation.

First, what I generally use is React Redux to control the state of my user, and with the state of your user you can render HTML depending if he is online or not. This is a snippet on how you could manage dynamic rendering with a variable.

class App extends Component {
  render() {
    let header = user.LoggedIn ? <Header /> : null
    return (
      <div>
            {header}
      </div>
    );
  }
}

However, with the current state of your application, this may be unnecessary. If you only hide the header on your root page, why even bothering putting it in. Encapsulate it within your home page and call it a day.