我的反应组件没有显示，尽管没有错误

Question

So i have zero errors, all my other components are displaying except my SignUp component. if I purposely create an error in the jsx of the SignUp component it will give me an error which makes me believe that the component is being rendered but its just not displaying on the screen. below ill provide the SignUp.js file, SignUp.css file and the App.js file. thanks for your help.

SignUp.js

import React, {Component} from 'react';
import '../stylesheets/SignUp.css';
import Auth from '../auth.js';
import NavBar from './NavBar.js';


const ENTER = 13;

var newAuth = new Auth();

class SignUp extends Component {

  _validatePassword=(password,passwordConfirm)=>{
    var lengthy = password.length < 6
    var samePassword = password !== passwordConfirm
    if(lengthy || samePassword){
      return false
      }
      else{
        return true
      }
    }
  _validateEmail=(email)=>{
    // var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    // return re.test(email)
  }
  _findError(email,password){
    return{
      email: email,
      password: password
    }
  }

  _handleSignup = () => {
    var user = {
      name:this.refs.fullname.value,
      email:this.refs.email.value,
      password:this.refs.password.value
    }
    if (user.name && user.email && user.password) {
      newAuth.signUp(user)
      .then(res => this.props.router.push('/login'))
      .catch(console.error);
    }
    else {
      this.setState({error: "Please fill in all fields"});
    }
  }




  _handleTyping = (e) => {
    if (this.state && this.state.error) {
      this.setState({ error: null })
    }
    if (e.keyCode===ENTER) {
      this._handleSignup()
    }
  }



  render(){
    return(

      <div className="signup">
       <NavBar/>
        <div className="group">
          <input className="page-input" type="text" ref="fullname"
            onKeyUp={this._handleTyping}
          />

          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Full Name</label>
        </div>
        <div className="group">
          <input className="page-input" type="text" ref="email"
            onKeyUp={this._handleTyping}
          />
          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Email</label>
        </div>
        <div className="group">
          <input className="page-input" type="password" ref="password"
            onKeyUp={this._handleTyping}
          />
          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Password</label>


        </div>
        <div className="group">
          <input className="page-input" type="password" ref="passwordConfirm"
            onKeyUp={this._handleTyping}
          />
          <span className="highlight"></span>
          <span className="bar"></span>
          <label className="modal-label">Confirm Password</label>

          <button className="signup-btn" onClick={this._handleSignup}><span>Sign Up</span></button>

        </div>

       {this.state && this.state.error ?
          <p>{this.state.error}</p>
          : null
        }
      </div>

    )
  }
}
export default SignUp;

SignUp.css

.singup {
  display: flex;
  flex-direction: column;
  height: 350px;
  margin-top: 55px;
}


.page-input                 {
  font-size:18px;
  padding:10px 10px 10px 5px;
  display:block;
  width:190px;
  border:none;
  border-bottom:1px solid #757575;
}
.page-input:focus       { outline:none; }

.page-input:focus ~ label, .page-input:valid ~ label        {
  top:-20px;
  font-size:14px;
}

label                {
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}

.bar    { position:relative; display:block; width:190px; }
.bar:before, .bar:after     {
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:black;
  transition:0.2s ease all;
  -moz-transition:0.2s ease all;
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%;
}

.page-input:focus ~ .bar:before, .page-input:focus ~ .bar:after {
  width:50%;
}
.group{
  display: flex;
  flex-direction: column;
  align-items: center;

}
highlight {
  position:absolute;
  height:60%;
  width:200px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

.page-input:focus ~ .highlight {
  -webkit-animation:.page-inputHighlighter 0.3s ease;
  -moz-animation:.page-inputHighlighter 0.3s ease;
  animation:.page-inputHighlighter 0.3s ease;
}

.signup-btn {
  position: relative;

  display: block;
  /*margin: 30px auto;*/
  margin-top:50px;
  padding: 0;

  overflow: hidden;

  border-width: 0;
  outline: none;
  border-radius: 2px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);

  background-color: #2ecc71;
  color: #ecf0f1;

  transition: background-color .3s;
}

.signup-btn:hover, .signup-btn:focus {
  background-color: #27ae60;
}

.signup-btn > * {
  position: relative;
}

.signup-btn span {
  display: block;
  padding: 12px 24px;
}

.signup-btn:before {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  display: block;
  width: 0;
  padding-top: 0;

  border-radius: 100%;

  background-color: rgba(236, 240, 241, .3);

  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.signup-btn:active:before {
  width: 120%;
  padding-top: 120%;

  transition: width .2s ease-out, padding-top .2s ease-out;
}

App.js

import React, { Component } from 'react';
import DietPlan from './components/DietPlan.js';
import LoseWeight from './components/LoseWeight.js';
import SignUp from './components/SignUp.js';
import FrontPage from'./components/FrontPage.js';
import LogIn from'./components/LogIn.js';
import BuildMuscleForm from'./components/BuildMuscleForm';
import {Route} from"react-router";
import {BrowserRouter} from"react-router-dom";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
      <div>
        <Route exact path={"/"} component={FrontPage}/>
        <Route path={"/singup"} component={SignUp}/>
        <Route path={"/login"} component={LogIn}/>
        <Route path={"/buildmuscle"} component={BuildMuscleForm}/>
        <Route path={"/loseweight"} component={LoseWeight}/>
        <Route path={"/planning"} component={DietPlan}/>



      </div>
      </BrowserRouter>

    );
  }
}

export default App;

im pretty stumped as to whats going on here because every other component is display. all im getting is a blank page and no errors. it could be something really simple that i didnt notice. thanks for the help

Answer 1

App.js defines the following route:

<Route path={"/singup"} component={SignUp}/>

Which specifies the path for the SignUp component to be '/singup' instead of '/signup'

If you correct the typo you should be able to see your component - you could also omit the curly braces

<Route path="/signup" component={SignUp} />