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、代码实现案例

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、嵌套路由知识点

       return <Route  key={key}  path={route.path}
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes} />
)}
/>

4、嵌套路由案例,App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css';
import routes from './model/router.js';
class App extends Component {
render() {
return (
<Router>
<div>
<header className="title">
<Link to="/">首页组件</Link>
<Link to="/user">用户页面</Link>
<Link to="/shop">商户</Link>
<Link to="/news">新闻</Link>
</header>
{
routes.map((route,key)=>{
if(route.exact){
return <Route key={key} exact path={route.path}
// route.component value.component <User {...props} routes={route.routes} />
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes} />
)}
/>
}else{
return <Route key={key} path={route.path}
render={props => (
// pass the sub-routes down to keep nesting
<route.component {...props} routes={route.routes} />
)}
/>
}
})
}
</div>
</Router>
);
}
} export default App;

5、router.js文件

let routes = [
{
path: "/",
component: Home,
exact:true
},
{
path: "/shop",
component: Shop
},
{
path: "/user",
component: User,
routes:[ /*嵌套路由*/
{
path: "/user/",
component: UserList
},
{
path: "/user/add",
component: UserAdd
},
{
path: "/user/edit",
component: UserEdit
}
]
},
{
path: "/news",
component: News
}
]; export default routes;

Reactjs之实现js跳转路由的更多相关文章

  1. 十六、React 渲染数据注意事项、以及react-router4.x中使用js跳转路由(登录成功自动跳转首页)

    一.React加载数据流程回顾 先看上一节的产品详情代码:https://blog.csdn.net/u010132177/article/details/103184176 [Pcontent.js ...

  2. 4.JS跳转路由/刷新/返回页面

    1.JS跳转路由(需要拿到父组件的history) clickHandle(){ let history = this.props.history; history.push( '/home') } ...

  3. React之js实现跳转路由

    1.新增知识 /* 实现js跳转路由:https://reacttraining.com/react-router/web/example/auth-workflow 1.要引入Redirect im ...

  4. Vue 编程式导航(通过js跳转页面)以及路由hash模式和history模式

    第一种方法: this.$router.push({path:'shopcontent?aid=3'}   第二种方法   this.$router.push({name:'news'}} 通过在ma ...

  5. 试着用React写项目-利用react-router解决跳转路由等问题(三)

    转载请注明出处:王亟亟的大牛之路 本来想一下子把路由的接下来的内容都写完的,但是今天白天开了会,传了些代码打了个包,就被耽搁了 这一篇来讲一下 IndexLink和 onlyActiveOnIndex ...

  6. 使用Js控制ReactRouter路由

    [使用Js控制ReactRouter路由] 首先引入PropTypes: const PropTypes = require('prop-types'); 然后定义context的router属性: ...

  7. vue.js编程式路由导航 --- 由浅入深

    编程式路由导航 实例中定义一个方法,这个方法绑定在标签上 然后就设置路由跳转 语法 this.$router.history.push('要跳转路由的地址') <!DOCTYPE html> ...

  8. react-router5.x 的配置及其页面跳转方法和js跳转方法

    https://blog.csdn.net/sinat_37255207/article/details/90745207 上次用react-router 的时候  还是3.x 很久不用 已经到rea ...

  9. vue使用vue-router beforEach实现判断用户登录跳转路由筛选

    vue使用vue-router beforEach实现判断用户登录跳转路由筛选 :https://www.colabug.com/3306814.html 在开发webApp的时候,考虑到用户体验,经 ...

随机推荐

  1. Linux操作系统的常用命令(一)

    一.写随笔的原因:上次提到centos7.3安装mysql5.7的一些步骤,恰巧最近面试有碰到一些问LInux操作的常用操作的问题,想通过这篇文章MARK一下,不一定能够全,只是用的比较多的吧(lin ...

  2. VMware三种网络模式详解

    转载自https://www.cnblogs.com/linjiaxin/p/6476480.html 好文章怕原始地址会不能用,转载到自己这里,感谢原作者的无私奉献. 由于Linux目前很热门,越来 ...

  3. 一文全面了解NB-IoT技术优势及特点

    1.NB-IOT多输入多输出技术 NB-IoT可以利用多天线技术抑制信道传输衰弱,获得分集增益.空间复用增益和阵列增益,在发送端和接收端均采用多天线实现信号同时发送和接收: 因此就形成了一个并行的多空 ...

  4. windows调试之命令行窗口问题

    CProProcess::InitProProcess(_T("safeProcessDemo")); cout << "Enter 'q' to exit: ...

  5. 高性能mysql 第1章 mysql架构与历史

    mysql逻辑架构图: 第一层 客户端 第二层(服务层):针对所有类型的存储引擎可以公共提取的部分.将存储引擎抽离之后的其他部分都在这里.如:查询解析,分析优化,内置函数,存储过程,触发器,视图. 第 ...

  6. json dumps dump区别

    .json.dumps()和json.loads()是json格式处理函数(可以这么理解,json是字符串) (1)json.dumps()函数是将一个Python数据类型列表进行json格式的编码( ...

  7. qt5-帮助文档的说明

  8. layui的数据表格加上操作

    数据表格加上操作. <script type="text/html" id="barDemo"> <a class="layui-b ...

  9. JavaScript 正则表达式——预定义类,边界,量词,贪婪模式,非贪婪模式,分组,前瞻

    ㈠预定义类    示例:匹配一个ab+数字+任意字符的字符串:ab\d.   ㈡边界 正则表达式常用的边界匹配字符   ⑴示例1:第一个是没写单词边界             第二个是加上字符边界的效 ...

  10. CSS3做出条纹大背景

    ㈠实现不等宽背景条纹   实现如上图所示的效果,代码如下: <!DOCTYPE html> <html lang="en"> <head> &l ...