React之js实现跳转路由
1、新增知识
/*
实现js跳转路由:https://reacttraining.com/react-router/web/example/auth-workflow
1、要引入Redirect
import {BrowserRouter as Router,Route,Link,Redirect,withRouter} from "react-router-dom"; 2、定义一个flag
this.state = {
loginFlag:false
}; 3、render里面判断flag 来决定是否跳转
if(this.state.loginFlag){
return <Redirect to={{ pathname: "/" }} />;
} 4、要执行js跳转
通过js改变loginFlag的状态
改变以后从新render 就可以通过Redirect自己来跳转
*/
2、代码实现js跳转路由
import React, { Component } from 'react';
import {Redirect} from "react-router-dom";
class Login extends Component {
constructor(props) {
super(props);
this.state = {
loginFlag:false
};
} doLogin=(e)=>{
e.preventDefault();
let username=this.refs.username.value;
let password=this.refs.password.value;
console.log(username,password)
if(username=='admin' && password==''){
//登录成功 跳转到首页
this.setState({
loginFlag:true
})
}else{
alert('登录失败')
}
} render() {
if(this.state.loginFlag){
// return <Redirect to={{ pathname: "/" }} />;
return <Redirect to='/' />;
}
return (
<div>
<br /> <br /> <br />
<form onSubmit={this.doLogin}>
<input type="text" ref="username" /> <br /> <br />
<input type="password" ref="password" /> <br /> <br />
<input type="submit" value="执行登录"/>
</form>
</div>
);
}
}
export default Login;
3、
React之js实现跳转路由的更多相关文章
- 十六、React 渲染数据注意事项、以及react-router4.x中使用js跳转路由(登录成功自动跳转首页)
一.React加载数据流程回顾 先看上一节的产品详情代码:https://blog.csdn.net/u010132177/article/details/103184176 [Pcontent.js ...
- 试着用React写项目-利用react-router解决跳转路由等问题(三)
转载请注明出处:王亟亟的大牛之路 本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink和 onlyActiveOnIndex ...
- Reactjs之实现js跳转路由
1.新增知识 /* 实现js跳转路由:https://reacttraining.com/react-router/web/example/auth-workflow 1.要引入Redirect im ...
- 4.JS跳转路由/刷新/返回页面
1.JS跳转路由(需要拿到父组件的history) clickHandle(){ let history = this.props.history; history.push( '/home') } ...
- 前端笔记之React(七)redux-saga&Dva&路由
一.redux-saga解决异步 redux-thunk 和 redux-saga 使用redux它们是必选的,二选一,它们两个都可以很好的实现一些复杂情况下redux,本质都是为了解决异步actio ...
- react实战系列 —— React 中的表单和路由的原理
其他章节请看: react实战 系列 React 中的表单和路由的原理 React 中的表单是否简单好用,受控组件和非受控是指什么? React 中的路由原理是什么,如何更好的理解 React 应用的 ...
- vue使用JS的形式进行路由导航
// 注意: 一定要区分 this.$route 和 this.$router 这两个对象, // 其中: this.$route 是路由[参数对象],所有路由中的参数, params, query ...
- react native 之页面跳转
第一章 跳转的实现 1.component 中添加这行代码 <View style={styles.loginmain}> <Text style={styles.loginte ...
- vue使用vue-router beforEach实现判断用户登录跳转路由筛选
vue使用vue-router beforEach实现判断用户登录跳转路由筛选 :https://www.colabug.com/3306814.html 在开发webApp的时候,考虑到用户体验,经 ...
随机推荐
- php不重新编译,添加模块
本文已安装mysqli模块为例 一:检查 1:首先保证php-fpm能正常启动 2:查看当前已安装的php模块是否有mysqli [root@oldboyedu ~]# /application/ph ...
- War of the Corporations CodeForces - 625B (greed)
A long time ago, in a galaxy far far away two giant IT-corporations Pineapple and Gogol continue the ...
- 【SDOI 2014】数表
题意 https://loj.ac/problem/2193 题解 显然就是求 $\sum\limits_{i=1}^{n} \sum\limits_{j=1}^{m} \sigma_1(\gcd{ ...
- 10.Go-goroutine,waitgroup,互斥锁,channel和select
10.1.goroutine goroutine的使用 //Learn_Go/main.go package main import ( "fmt" "time" ...
- poj1740 A New Stone Game[博弈]
有若干堆石子,每一次需要从一堆石子中拿走一些,然后如果愿意的话,再从这堆石子中拿一些(揣度题意应该是不能拿出全部)分给其它任意不为空的堆.不能操作的人为负. 一直不会博弈啊..感觉完全就是个智商题,虽 ...
- django初步--+urls解析
1.静态文件配置: 你在浏览器中输入网址能够有响应的资源返回给你 是因为后端已经提前给你开设该资源的接口,也就意味着你所能 访问到的资源 都是人家事先定义好的. 2.django如何给用户开设资源接口 ...
- hiho #1469 : 福字(dp)
#1469 : 福字 时间限制:6000ms 单点时限:1000ms 内存限制:256MB 描述 新年到了,你收到了一副画.你想找到里面最大的福字. 一副画是一个n × n的矩阵,其中每个位置都是一个 ...
- HTML中的表格和图像总结
㈠表格 ⑴表格的基本结构 ①表格的基本标签有:table标签(表格),tr标签(行),td标签(单元格).<tr>标签和<td>标签都要在表格的开始标签<table> ...
- Linux扩展swap分区
一.将sda磁盘进行分区: 先查看sda磁盘已经使用了多少主分区,如下图所示,主分区已使用3个,所以应选择扩展分区: 二.再将扩展分区进行分区: 三.分区完成后执行partprobe使系统重新识别分区 ...
- sqli-labs(4)
sqli-libs(4)通关过程 0x01爱之初体验 首先我们进行注入试探 发现我们的单引号 回显事正常的 双引号回显反而是错误的 查看源码我们发现 多了一个给id赋值的语句 我们在php上面执行一下 ...