在登录页面上隐藏标题

Question

我想在“登录”页面中隐藏标题栏，成功登录后，它应该出现在其他页面中，我试图在css中创建一个类，因此它隐藏了标题，但是我找不到在a之后禁用它的方法成功登录

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.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

对我来说，您的代码有点不清楚，因为我们看不到您在哪里声明标头。 我可以看到几种处理您的情况的方法。

首先，我通常使用React Redux来控制用户的状态，根据用户的状态，您可以根据用户是否在线来呈现HTML。 这是有关如何使用变量管理动态渲染的摘要。

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

但是，对于您的应用程序的当前状态，这可能是不必要的。 如果您仅将标题隐藏在根页面上，那么为什么还要麻烦将其放入。将其封装在您的主页中，并称之为一天。