javascript - 登录后如何重定向到主页:ReactJS?
问题描述
homepage
在 ReactJS 中成功登录后如何重定向?以及如何error message
在用户输入错误凭据时显示?
我尝试了类似下面的方法,但在成功登录后并没有在用户点击错误凭据时显示redirect
提示。
如果有人能弄清楚我在哪里做错了,那就太好了。homepage
login failed
./src/Login.js
import React, {Component} from "react";
import {Form} from 'antd';
import { Redirect } from "react-router-dom";
export default class App extends Component{
constructor(props) {
super(props);
this.state ={
username: "",
password: "",
}
this.onFormSubmit = this.onFormSubmit.bind(this)
}
onFormSubmit(values){
console.log(values);
const formData = new FormData();
formData.append("username", values.username);
formData.append("password", values.password);
const options = {
method: 'POST',
body: formData
};
fetch('http://localhost:8000/api/login', options).then(() => {
<Redirect to="/home" />
}).catch((error) => {
console.log(this.props.state)
})
};
render(){
return(
<div>
<Form onFinish={this.onFormSubmit}>
<div class="col-md-12 form-group p_star">
<Form.Item name="username">
<input type="text" class="form-control" placeholder="Username"/>
</Form.Item>
</div>
<div class="col-md-12 form-group p_star">
<Form.Item name="password">
<input type="password" class="form-control"
placeholder="Password"/>
</Form.Item>
</div>
<div class="col-md-12 form-group">
<button type="submit" value="submit" class="btn_3">
log in
</button>
</div>
</Form>
</div>
解决方案
推荐阅读
- javascript - 如何从 reactjs 中的 JSON 数据中获取字体真棒图标?
- linux - 在启动之前将文件复制到 Docker 容器
- javascript - 如何只循环一次所有可能的 JSON 对象键对?
- c# - ASP.NET Core WebAPI:自定义 InputFormatter 验证模型状态
- java - 你如何让 maven swagger codegen 插件使用继承生成 Java 类?
- java - 检查 Null 并将两个字符串与 Java 中的分隔符组合,否则返回一个 [Java -7]
- mysql - 为什么 HAVING MAX() 返回的值与 SELECT MAX() 不同?
- jquery - jQuery数据表分页 - 在多个页面上发送表单的问题
- java - tableModel.addRow() 未在 JTable 中显示任何内容,但行对象具有值
- java - java - 如何在spring boot java中编写一个函数来处理JPA存储库中的自定义查询?