导航栏在我运行启动纱线时（即纱线构建和纱线服务器）不显示，但在开发器中显示（节点server.js /节点client.js）

Question

即使在开发服务器中工作，导航栏也不会显示。我检查了该工具，以查看导航栏是否在登录页面中显示，并且它在开发服务器和构建服务器中都存在。我不知道为什么它不起作用。我正在使用原始CSS创建这些导航栏，我使用了className来标识它们。任何帮助表示赞赏。

APP.CSS

.App {
  text-align: center;
}

/* global styles */

.title-wrapper{
  margin-top: 100px;
  margin-bottom: 50px;
  text-transform: uppercase;
  font-family: 'Londrina Solid', cursive;
}
.title-wrapper h1{
    color:  #571D2E;
    font-size: 120px;
    text-align: center;
}

.title-for-loggedIn{
  position: absolute;
  font-size: 51px;
  margin-left: 43%;
}

.home-bottom{
  background-color: white;
}

.home-bottom img{
  width: 200px;
  margin-top: 21.5px;
}

/* nvbR STUFF*/
.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color:#571D2E;
  height: 90px;
  padding: 20px;
}

.App-header .text-secondary{
  color: #A98638!important;
  font-family: 'Londrina Solid', cursive;
  font-size: 1em;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

.navbar {
  text-transform: uppercase;
  margin-top: auto;
  display: none;
}

.error-msg{
  color: red!important;
  margin-top: 5px;
  font-size: 12px;
}

#top-filler {
  margin-bottom: auto;
}

#nav-container {
  align-items: flex-end;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}



.header-logo{
  font-family: 'Londrina Solid', cursive;
  color: #A98638;
  font-size: 60px;
  position: relative;
  bottom: 75px;
  text-shadow: 2px 2px 800px bisque;
}
.title-for-loggedIn{
  position: absolute;
  font-size: 51px;
  margin-left: 43%;
}
.semester-form-component{
  text-align: left;
}

.student-form .semester-form-component .season:hover{
  text-decoration: none;
  color:#A98638;
  cursor: pointer;
  background-color:rgba(0, 0, 0, 0.1);
}
.student-form .semester-form-component .season{
  text-decoration: none;
  list-style-type: none;
  font-size: 24px;
  color:#571D2E;
  border: 2px;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
}

.student-form .semester-form-component .row{
  display: block;
  font-size: 12px;
  text-align: left;
  margin-left: 150px;
}

.student-form .semester-form-component #checkbox:hover{
  cursor: pointer;
}

.student-form .semester-form-component i{
  margin-top: 6.5px;
  float: right;
}

.student-form .semester-form-component .form-group{
  margin-left: 10px;
}

.student-form .number-courses{
  width: 100%;
  display: inline-flex;
}

.student-form .number-courses label{
  max-width: 90%;
  margin-left: 15px;
}

.student-form .number-courses select{
  max-width: 10%;
  margin-left: 25px;
}

.student-form .form-section-content{
  min-width: 500px;
}

.student-form .form-check{
  margin-left: 10px;
}

#student-form-content{
  margin-bottom: 75px;
  margin-top: 75px;
}

.student-form .btn{
  margin-bottom: 75px;
}

.student-form .evening-checkbox{
  margin-left: 15px;
}

.student-form .course-preferences{
  margin-left: 15px;
}

.student-form .course-selection-box .row{
  display: table-cell;
  padding: 10px;

}

.student-form .course-selection-box .add-course-button i{ 
  font-size: 18px;
  margin-top: 3px;
}

.student-form .course-selection-box{
  background: 5px aliceblue;
  padding: 15px;
  border-radius: 15px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.student-form .course-selection-box .selected-courses-container .row{
  display: block;
}
.student-form .selected-courses-container .selected-courses{
  padding: 10px;
}

导航栏组件

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../App.css';
import axios from 'axios';

class Navbar extends Component {
  constructor() {
    super();
    this.logout = this.logout.bind(this);
  }

  logout(event) {
    const { updateUser } = this.props;
    event.preventDefault();
    console.log('logging out');
    axios.post('/user/logout').then((response) => {
      console.log(response.data);
      if (response.status === 200) {
        updateUser({
          loggedIn: false,
          username: null,
        });
      }
    }).catch((error) => {
      console.log('Logout error', error);
    });
  }

  render() {
    const { loggedIn } = this.props;

    console.log('navbar render, props: ');
    console.log(this.props);

    return (
      <div>

        <header className='navbar App-header' id='nav-container'>
          <div className='col-4'>
            {loggedIn ? (
              <section className='navbar-section'>
                <Link to='#' className='btn btn-link text-secondary' onClick={this.logout}>
                  <span className='text-secondary'>logout</span>

                </Link>

              </section>
            ) : (
              <section className='navbar-section'>
                  <Link to='/' className='btn btn-link text-secondary'>
                    <span className='text-secondary'>login</span>
                  </Link>
                  <Link to='/signup' className='btn btn-link'>
                    <span className='text-secondary'>sign up</span>
                  </Link>
                </section>
            )}
          </div>
        </header>
      </div>

    );
  }
}

导出默认导航栏

首页

import React, { Component } from 'react';
import axios from 'axios';
import { Route } from 'react-router-dom';

import Signup from './components/sign-up';
import LoginForm from './components/login-form';
import Navbar from './components/navbar';
import Home from './components/home';


import concordiaLogo from './assets/concordia-logo.jpeg';


class App extends Component {
  constructor() {
    super();
    // Must set state to null otherwise UI will load prematurely before server response
    this.state = null;

    this.getUser = this.getUser.bind(this);
    this.componentDidMount = this.componentDidMount.bind(this);
    this.updateUser = this.updateUser.bind(this);
  }

  componentDidMount() {
    this.getUser();
  }

  getUser() {
    axios.get('/user').then((response) => {
      console.log('Get user response: ');
      console.log(response.data);
      if (response.data.user) {
        console.log('Get User: There is a user saved in the server session: ');

        this.setState({
          loggedIn: true,
          username: response.data.user.username,
        });
      } else {
        console.log('Get user: no user');
        this.setState({
          loggedIn: false,
          username: null,
        });
      }

      console.log('SHOULD RELOAD PAGE HERE');
    }).catch((error) => {
      console.log('Get user: no user');
      console.error(error);
      this.setState({
        loggedIn: false,
        username: null,
      });
    });
  }

  updateUser(userObject) {
    this.setState(userObject);
  }

  render() {
    const { state, updateUser, signup } = this;

    if (!this.state) {
      // Show nothing while waiting for axios response
      return <div />;
    }
    return (

      <div className='App'>
        <Navbar updateUser={updateUser} loggedIn={state.loggedIn} />
        {/* greet user if logged in: */}
        {state.loggedIn
          && (

            <Home />

          )
        }



        {}
        {/* Routes to different components */}
        {!state.loggedIn && (
          <Route
            exact
            path='/'
            render={() => (
              <LoginForm
                updateUser={updateUser}
              />
            )}
          />
        )
        }
        {!state.loggedIn && (
          <Route
            path='/signup'
            render={() => (
              <Signup
                signup={signup}
              />
            )}
          />
        )}


        <div className='home-bottom'>
          <img src={concordiaLogo} alt='Concordia University' />
        </div>
      </div>
    );
  }
}

export default App;