React登录跳转遇到的问题
时间:2022-07-23
本文章向大家介绍React登录跳转遇到的问题,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
最近在对接登录接口,但是对接好后,跳转不会搞。。。醉了 环境: 1.React16 2.React Router v4
1.方法一
这个方法完美解决。
图片.png
具体就是,要自己新建一个history.js文件,然后将它引入router和登录中。 上图很清楚,有问题直接评论
2.方法二
当然,v4上 BrowserRouter 提供了 hisotry 对象,所以有了方法二.可以使用
withRouter
;API文档:https://reacttraining.com/react-router/web/api/withRouter
1.路由代码,使用BrowserRouter
......
import {BrowserRouter, Route, Switch, Redirect} from "react-router-dom";
......
const App = () => (
<main>
<BrowserRouter>
<Switch>
<Redirect exact from="/" to="/manage/foods"/>
<Route exact path='/login' component={Login}/>
......
2.请求代码
具体的helper请求封装,请看这篇文章最下面:http://www.jianshu.com/p/4da550ac7f15
1)请求跳转函数
handleLogin =(e) => {
e.preventDefault()
this.props.form.validateFields((err, values)=>{
if(!err){
let data={}
data.username = values.username
data.password = values.password
loginReq(data)
.then(function(req){
if(req ==='success'){
//登录成功跳转
this.props.history.push('/')
}else if(req === 'error'){
message.error('用户名或密码错误!')
}
}.bind(this))//这里需要把this绑定,不然报错
}
})
}
2)组件放入withRouter
......
import { withRouter} from 'react-router-dom'
......
export default withRouter(Form.create({
mapPropsToFields(props) {
return {
username: { value: '' },
password: { value: '' },
autologin: { value: '' }
}
}
})(LoginForm))
参考资料
- https://github.com/ReactTraining/react-router/blob/master/FAQ.md#how-do-i-access-the-history-object-outside-of-components
- https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router
- Python基础02 基本数据类型
- 用命令重启IIS 常重启IIS的朋友看过来
- Python基础01 Hello World!
- 剑指OFFER之从上往下打印二叉树(九度OJ1523)
- 给你的博客加上“Fork me on Github”彩带
- Android Studio添加PNG图片报错原因
- 剑指OFFER之包含min函数的栈(九度OJ1522)
- 使用VS2010开发Qt程序的一点经验
- 用Qt写软件系列五:一个安全防护软件的制作(3)
- 剑指OFFER之顺时针打印矩阵(九度OJ1391)
- 用Qt写软件系列五:一个安全防护软件的制作(2)
- 2018年值得关注的200场机器学习会议
- Linux开机启动(bootstrap)
- 剑指OFFER之树的子结构(九度OJ1520)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法