Я пытаюсь создать простой сайт React, где пользователь может зарегистрироваться на домашней странице или войти, если у него уже есть учетная запись.
Я хочу, чтобы домашняя страница была компонентом SignUpесли пользователь еще не зарегистрировался или не вошел в систему, но мне нужна другая домашняя страница, если пользователь вошел в систему.
Я использую Axios для публикации / получения информации о пользователе.Он публикует информацию правильно, но после добавления нового пользователя ничего не происходит!
Вот мой код:
Компонент макета:
import React, {Component} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import AboutUs from '../AboutUs';
import Header from '../Header';
import SignUp from '../SignUp';
import Home from '../Home';
export default class Layout extends Component {
constructor(props) {
super(props);
this.state = {
loggedInUser: ''
};
}
setLoggedInUser = (user) => {
this.setState({
loggedInUser: user
});
this.props.history.push('/');
};
render() {
// THESE JUST DETERMINE WHAT THE HOME URLs SHOULD BE, IF LOGGED IN.
// MUST STILL USE LOGIC TO RE-DIRECT.
let routes = (
<React.Fragment>
<Route path='/sign-up' component={SignUp} exact />
<Route path='/' component={SignUp} exact />
</React.Fragment>
)
if (this.loggedInUser) {
routes = (
<React.Fragment>
<Route path='/home' component={Home} exact />
<Route path='/' component={Home} exact />
</React.Fragment>
)
}
return (
<div>
<Header submit={this.signInSubmitHandler} loggedInUser={this.state.loggedInUser} />
<Route path='/about' component={AboutUs} exact />
{routes}
</div>
);
}
}
Компонент заголовка:
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import axios from 'axios';
export default class Header extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
this.signInSubmitHandler = this.signInSubmitHandler.bind(this);
}
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
});
};
signInSubmitHandler = (event) => {
event.preventDefault();
const user = {
email: this.state.email,
password: this.state.password
};
axios.post("http://localhost:8080/login", user)
.then(
response => { this.props.setLoggedInUser(response.data); }
)
.catch(
response => { console.log("In the future, add logic to navigate to an error page.") }
);
if (user !== null){
alert("User signed in successfully!");
}
//super.setLoggedInUser(user);
}
render() {
let links;
let searchBar;
return (
<div>
<nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<NavLink className="navbar-brand" to="/">Student Portal</NavLink>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarCollapse">
<ul className="navbar-nav mr-auto">
<li className="nav-item">
<NavLink className="nav-link" to="/about">About</NavLink>
</li>
<li className="nav-item">
<NavLink className="nav-link" to="/sign-out">Sign Out</NavLink>
</li>
</ul>
{/*<form className="form-inline mt-2 mt-md-0">
<input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>*/}
<form onSubmit={this.signInSubmitHandler} className="search-bar form-inline mt-2 mt-md-0">
<input name="email" value={this.state.value} onChange={this.handleChange} className="form-control mr-sm-2" type="text" placeholder="E-mail" aria-label="email" />
<input name="password" value={this.state.value} onChange={this.handleChange} className="form-control mr-sm-2" type="text" placeholder="Password" aria-label="password" />
<button type="submit" className="btn btn-outline-success my-2 my-sm-0">Sign In</button>
</form>
</div>
</nav>
</div>
);
}
}
Компонент входа:
import React, {Component} from 'react';
import '../css/SignUp.css';
import axios from 'axios';
export default class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
firstName: '',
lastName: '',
age: '',
telephone: '',
email: '',
password: '',
addedUser: false
};
this.handleChange = this.handleChange.bind(this);
this.signUpSubmitHandler = this.signUpSubmitHandler.bind(this);
}
handleChange = (event) => {
const name = event.target.value;
const value = event.target.value;
this.setState({
[event.target.name]: event.target.value
});
}
signUpSubmitHandler = (event) => {
event.preventDefault();
const student = {
firstName: this.state.firstName,
lastName: this.state.lastName,
age: this.state.age,
telephone: this.state.telephone,
email: this.state.email,
password: this.state.password
};
axios.post("http://localhost:8080/submitStudentDetails", student)
.then(
response => {
alert("Added " + this.state.firstName)
}
)
.catch(
error => {
alert("Error")
}
);
}
render() {
return (
<div>
<div className="container">
<div className="col-md-6 mx-auto text-center">
<div className="header-title">
<h1 className="wv-heading--title">
Sign up — it’s free!
</h1>
<h2 className="wv-heading--subtitle">
Lorem ipsum dolor sit amet! Neque porro quisquam est qui do dolor amet, adipisci velit...
</h2>
</div>
</div>
<div className="row">
<div className="col-md-4 mx-auto">
<div className="myform form ">
<form onSubmit={this.signUpSubmitHandler} name="signUp">
<div className="form-group">
<input type="text" name="firstName" value={this.state.value} onChange={this.handleChange} className="form-control" id="firstName" placeholder="First Name" />
</div>
<div className="form-group">
<input type="text" name="lastName" value={this.state.value} onChange={this.handleChange} className="form-control" id="lastName" placeholder="Last Name" />
</div>
<div className="form-group">
<input type="text" name="age" value={this.state.value} onChange={this.handleChange} className="form-control" id="age" placeholder="Age" />
</div>
<div className="form-group">
<input type="text" name="telephone" value={this.state.value} onChange={this.handleChange} className="form-control" id="telephone" placeholder="Telephone" />
</div>
<div className="form-group">
<input type="text" name="email" value={this.state.value} onChange={this.handleChange} className="form-control" id="email" placeholder="E-mail" />
</div>
<div className="form-group">
<input type="text" name="password" value={this.state.value} onChange={this.handleChange} className="form-control" id="password" placeholder="Password" />
</div>
<div className="text-center ">
<button type="submit" className=" btn btn-block send-button tx-tfm">Create Your Free Account</button>
</div>
<div className="col-md-12 ">
<div className="login-or">
<hr className="hr-or" />
</div>
</div>
<p className="small mt-3">By signing up, you are indicating that you have read and agree to the <a href="#" className="ps-hero__content__link">Terms of Use</a> and <a href="#">Privacy Policy</a>.
</p>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
Домашний компонент:
import React, {Component} from 'react';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
students: ''
}
}
render() {
return (
<div>
<h1>HOME: logged in!</h1>
<p>Welcome!</p>
</div>
);
}
}