React-Router JS控制路由跳转

时间: 2016-04-12 15:01:20 作者: zhongxia

React-Router 控制路由跳转的方式,目前知道的有两种[Link 链接, 和 JS控制跳转 ] ,但是最常用的就是 用 Link(类似 a 标签),来进行跳转

JS实现方式

由于有时候需要 点击某个标签,或者某一个按钮,来动态的实现页面跳转的地址,这个就需要使用到 JS 来实现

实现的代码很简单

this.props.history.pushState(null, url);

注意:如果是根据 路由规则返回的组件, props 上是包含 history 这个属性的, 如果不是的话,则没有这个属性.

React-Router JS控制路由跳转的更多相关文章

  1. react项目中引入了redux后js控制路由跳转方案

    如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...

  2. react-router JS 控制路由跳转（转载）

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.han ...

  3. react-router v4 使用 history 控制路由跳转

    问题 当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理 我们从react-router导出browserHistory. 我们使用browserHistory.push ...

  4. js 控制页面跳转的5种方法

    js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...

  5. JS控制div跳转到指定的位置的几种解决方案总结

    原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...

  6. Jsp页面跳转和js控制页面跳转的几种方法

    Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...

  7. js控制页面跳转,清缓存，强制刷新页面

    单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...

  8. nuxt.js同路由跳转参数不同，mounted不执行时

    watch: { '$route'(to, from) { if (to.fullPath !== from.fullPath) { this.$nextTick(() => { // 不加th ...

  9. vue路由--使用router.push进行路由跳转

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...

随机推荐

  1. 学习angualr之前需要了解的typeScript知识

    官网 : www.typescriptlang.org   1.编译型语言 2.强类型语言 3.真正的面向对象的语言: 有借口.有泛型.有枚举.有访问修饰符 AMD类型的面向对象的语言     npm ...

  2. [CQOI 2018]异或序列&[Codeforces 617E]XOR and Favorite Number

    Description 题库链接1 题库链接2 已知一个长度为 \(n\) 的整数数列 \(a_1,a_2,\cdots,a_n\) ,给定查询参数 \(l,r\) ,问在 \([l,r]\) 区间内 ...

  3. ASP.NET MVC控制器里捕获视图的错误验证信息（ErrorMessage）

    ViewModel类: /// <summary> /// 评论用验证视图 /// </summary> public partial class VCreateShopCom ...

  4. php 多次导入文件导致 Cannot redeclare class

    定义了类A b.php中导入了A c.php中导入了b.php c.php中导入A会报错:

  5. win10 系统下MyEclipse用SVN之后想切换用户的解决方法

    1.在svn 创建了两类账户,分别是管理员 和 开发人员. 2.代码同步到Myecclipse .使用的是 admin 管理员账户checkout. 3.提交代码的时候想用开发者账户user提交,发现 ...

  6. 关于YII中layout中的布局和view中数据的关系

    1. view中解释php脚本后显示出的内容会在layout中以<?php echo $content?>输出. 2. view是对应的controller的实例,所以可以通过$this- ...

  7. gulp自动化打包及静态文件自动添加版本号

    前端自动化打包发布已是一种常态,尤其在移动端,测试过程中静态资源的缓存是件很头疼的事情,有时候明明处理的bug测试还是存在,其实就是缓存惹的祸,手机不比pc浏览器,清理缓存还是有点麻烦的.所以自动化实 ...

  8. Laravel 支付宝支付异步通知

    支付宝支付通知有前端通知(GET)和服务器异步通知(POST) 在配置支付宝支付时,需要注意的问题就是支付宝的回调操作: 1.在laravel中应该将支付宝通知路径组织csrf验证,否则会导致419错 ...

  9. cocos2d-x学习网站

    非常好的学习cocos2d-x网站 强烈推荐!---游戏蛮牛

  10. OpenGL学习--08--基本渲染(灯光)

    1.tutorial08.cpp // Include standard headers #include <stdio.h> #include <stdlib.h> #inc ...