Meine Reaktionskomponente wird nicht angezeigt, obwohl keine Fehler aufgetreten sind

Question

So habe ich Null Fehler, alle meine anderen Komponenten werden angezeigt, außer meine SignUp-Komponente. Wenn ich absichtlich einen Fehler in der JSX der SignUp-Komponente erstelle, wird es mir einen Fehler geben, der mich glauben lässt, dass die Komponente gerendert wird, aber es nur nicht auf dem Bildschirm angezeigt wird. Unten finden Sie die SignUp.js-Datei, die SignUp.css-Datei und die App.js-Datei. danke für Ihre Hilfe.

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 ziemlich zu, was los hier stapfte, weil jede andere Komponente Anzeige ist. Alles was ich bekomme ist eine leere Seite und keine Fehler. es könnte etwas wirklich einfaches sein, das ich nicht bemerkt habe. Dank für die Hilfe

Answer 1

App.js definiert die folgende Route:

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

, die den Weg für die SignUp Komponente '/signup'

Wenn Sie die Tippfehler korrigieren sollten Sie in der Lage sein, gibt sein '/singup' statt um Ihre Komponente zu sehen - Sie könnten auch die geschweiften Klammern weglassen

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