javascript - 尽管没有错误，但我的 react 组件没有显示

Question

所以我的错误为零，除了我的注册组件之外，所有其他组件都在显示。如果我故意在 SignUp 组件的 jsx 中创建一个错误，它会给我一个错误，让我相信该组件正在渲染，但它只是没有显示在屏幕上。下面将提供 SignUp.js 文件、SignUp.css 文件和 App.js 文件。感谢您的帮助。

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;

注册.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;

我对这里发生的事情感到非常困惑，因为所有其他组件都是显示的。我得到的只是一个空白页，没有错误。这可能是一些我没有注意到的非常简单的事情。感谢您的帮助

Answer 1

App.js 定义了以下路由:

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

它将 SignUp 组件的路径指定为 '/singup' 而不是 '/signup'

如果您纠正了拼写错误，您应该能够看到您的组件 - 您也可以省略花括号

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