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. Node.js链式回调

    由于异步的关系,代码的书写顺序可能和执行顺序并不一样,可能想先执行A再执行B,但由于异步可能B要先于A执行.例如在OC中使用AFnetworking请求数据然后刷新页面,由于网络请求是用block实现 ...

  2. Android 控件：使用下拉列表框--Spinner

    ---恢复内容开始--- 一.前段代码 <Spinner android:id="@+id/spin" android:paddingTop="10px" ...

  3. Action Bar

    1.显示隐藏Action Bar 1.配置上 在application 上的 android:theme="@style/AppTheme"全局配置ActionBar在某个acti ...

  4. sqlserver 获取数据库、表和字段相关信息

    --获取指定服务器上的所有数据库 SELECT Name FROM Master..SysDatabases ORDER BY Name --获取指定数据库下所有表 SELECT Name FROM ...

  5. python简单验证码

    安装图片处理模块pillow :   pip install pillow pillow官网:http://pillow.readthedocs.io/en/latest/ 在views.py添加视图 ...

  6. maven 插件jetty/tomcat启动 web 应用

    tomcat <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomca ...

  7. Claims-based认证解析

    Claims-based认证相关的两个重要的类ClaimsIdentity以及ClaimsPrincipal解析 ClaimsIdentity以及ClaimsPrincipal是.NET下Claims ...

  8. Linux 加阿里yum源

    阿里 yum 源设置 阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/CentOS系统更换软件安装源 第一步:备份你的原镜像文件,以免出错后可以恢复.mv /etc ...

  9. wkhtmltopdf中文参数

    wkhtmltopdf [OPTIONS]... [More input files] 常规选项 --allow <path> 允许加载从指定的文件夹中的文件或文件(可重复) --book ...

  10. Centos7安装最新版本的docker

    centos7 安装docker-ce ,最新版本docker,docker阿里云加速docker-ce是指docker的社区版 卸载老版本的 docker 及其相关依赖sudo yum remove ...