Javascript 为什么赢了'；注册或登录后，我的React站点是否重定向到主页？
我正在尝试创建一个简单的React站点，用户可以在该站点的主页上注册，或者在用户已经拥有帐户的情况下登录 如果用户尚未注册或登录，我希望主页成为注册组件，但是如果用户登录，我希望主页不同 我正在使用Axios发布/获取用户信息。它正确地发布信息，但在用户添加新用户后不会发生任何事情 这是我的密码： 布局组件：Javascript 为什么赢了'；注册或登录后，我的React站点是否重定向到主页？,javascript,json,reactjs,axios,postman,Javascript,Json,Reactjs,Axios,Postman,我正在尝试创建一个简单的React站点，用户可以在该站点的主页上注册，或者在用户已经拥有帐户的情况下登录 如果用户尚未注册或登录，我希望主页成为注册组件，但是如果用户登录，我希望主页不同 我正在使用Axios发布/获取用户信息。它正确地发布信息，但在用户添加新用户后不会发生任何事情 这是我的密码： 布局组件： import React, {Component} from 'react'; import {BrowserRouter, Route, Switch} from 'react-rout
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>
);
}
}
import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“../AboutUs”导入AboutUs；
从“../Header”导入标头；
从“../SignUp”导入注册；
从“../Home”导入Home；
导出默认类布局扩展组件{
建造师（道具）{
超级（道具）；
此.state={
loggedInUser:'
};
}
setLoggedInUser=（用户）=>{
这是我的国家({
loggedInUser:user
});
this.props.history.push（'/'）；
};
render（）{
//这些仅仅决定了如果登录，主URL应该是什么。
//仍然必须使用逻辑重新定向。
让路线=(
)
if（this.loggedInUser）{
路线=(
)
}
返回(
{routes}
);
}
}
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>
);
}
}
import React，{Component}来自'React'；
从'react router dom'导入{NavLink}；
从“axios”导入axios；
导出默认类头扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电子邮件：“”，
密码：“”
};
this.handleChange=this.handleChange.bind（this）；
this.signInSubmitHandler=this.signInSubmitHandler.bind（this）；
}
handleChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value
});
};
signInSubmitHandler=（事件）=>{
event.preventDefault（）；
常量用户={
电子邮件：this.state.email，
密码：this.state.password
};
axios.post（“http://localhost:8080/login“，用户）
.那么(
response=>{this.props.setLoggedInUser（response.data）；}
)
.接住(
response=>{console.log（“将来，添加逻辑以导航到错误页面。”）}
);
如果（用户！==null）{
警报（“用户成功登录！”）；
}
//super.setLoggedInUser（用户）；
}
render（）{
让链接；
让搜索栏；
返回(
学生门户
-
关于
-
退出
{/*
搜索
*/}
登录
);
}
}
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>
);
}
}
import React，{Component}来自'React'；
导入“../css/SignUp.css”；
从“axios”导入axios；
导出默认类注册扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名字：''，
姓氏：“”，
年龄：''，
电话：''，
电子邮件：“”，
密码：“”，
addedUser：错
};
this.handleChange=this.handleChange.bind（this）；
this.signUpSubmitHandler=this.signUpSubmitHandler.bind（this）；
}
handleChange=（事件）=>{
const name=event.target.value；
常量值=event.target.value；
这是我的国家({
[event.target.name]：event.target.value
});
}
signUpSubmitHandler=（事件）=>{
event.preventDefault（）；
常数学生={
名字：this.state.firstName，
lastName:this.state.lastName，
年龄：这个州，
电话：这个州的电话，
电子邮件：this.state.email，
密码：this.state.password
};
axios.post（“http://localhost:8080/submitStudentDetails“，学生）
。然后（
响应=>{
警报（“添加”+this.state.firstName）
}
)
.接住(
错误=>{
警报（“错误”）
}
);
}
render（）{
返回(
注册-免费！
我的爱人坐在我身边！我的爱人，我的爱人，我的爱人。。。