实现点击跳转到新页面,可以有两种形式,一个是本地页面打开,一个是本地页面不变跳转到新的页面。

(一)页面点击本地页面打开新页面

引入ant的Button组件

<Button style={{backgroundColor:'#F0F2F5'}}
onClick={()=>{window.location.href="https://baidu.com"}}
className="r-button"
>

引入import {Link} from 'react-router-dom'

<Link to="/new/login/">
<Button className="e-button" type="primary">Back to login page</Button>
</Link>

(二)本地页面不变跳转到新的页面

<Button style={{backgroundColor:'#F0F2F5'}}
onClick={this.handle}
className="last-button"
>
handle=()=>{
const w=window.open('about:blank');
w.location.href="www.baidu.com"
}

by我还差的很远,我写的不对的地方,请大家指出来,这样我才能够进步啊,给各位大佬递茶

react中实现点击跳转到新页面方法的更多相关文章

  1. 微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone)

    微信内置浏览器中,点击下拉框出现页面乱跳转现象(iphone) 前言: 这是小菜博客的第三篇文章.一直认为自己可以表达的东西太过简单,难以上台面,总是吝啬地不肯写.就算是写,也不知道从何开始.在同事的 ...

  2. PHP弹出提示框并跳转到新页面即重定向到新页面

    本文为大家介绍下使用PHP弹出提示框并跳转到新页面,也就是大家所认为的重定向,下面的示例大家可以参考下   这两天写一个demo,需要用到提示并跳转,主要页面要求不高,觉得没必要使用AJAX,JS等, ...

  3. 问题:使用ajax跳转到新页面无效(浏览器Safari)

    问题:使用ajax跳转到新页面无效(浏览器Safari)   window.open("{% url "runtestinfo" %}")   但是使用loca ...

  4. H5如何实现关闭当前页面,跳转到新页面?

    小程序有此功能的跳转方法. 那么H5如何实现该功能?  很简单. location.replace('new.html')  这个方法可以实现 关闭当前页面,跳转到新页面 的效果. 而   windo ...

  5. Java web开发中页面跳转小技巧——跳转后新页面在新窗口打开

    最近学习Java web,在学习过程中想实现一个需求,就是在jsp页面跳转的时候,希望跳转后的新页面在新窗口中打开, 而不是覆盖原来的页面,这个需求使我困惑了好长时间,后来通过大海捞针似的在网上寻找方 ...

  6. Android Studio计时跳转或点击跳转至主页面

    这个总体来说是比较简单的,计时跳转一般调用Android Studio中的Handler方法. 一.发生点击事件跳转页面 mBtnTextView = (Button) findViewById(R. ...

  7. a标签点击跳转到新窗口打开目标资源

    点击a标签跳转到新窗口打开目标资源, <a href="http://gd.zjtcn.com/facs/c_t_p1_圆钉 50-75.html" target=" ...

  8. 如何设置使chrome新标签页中打开链接自动跳转到新标签页?

    在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...

  9. Android Studio实现页面跳转(新页面或者网站)

    一,跳转到另一个页面 百度了好久,好像好多种方法,从中挑选了一中比较方便的一中方法 利用Intent类进行实现 1,首先在firstActivity中添加相应的跳转命令代码 例如一下示例代码 if ( ...

随机推荐

  1. git心得与总结

    任何文件在Git库中都有四种状态:未跟踪状态untracked.跟踪状态tracked(未修改状态unmodified.已修改状态modified.暂存状态staged),由于文件的上述四种状态,在使 ...

  2. atcoder A - Frog 1(DP)

    A - Frog 1 Time Limit: 2 sec / Memory Limit: 1024 MB Score : 100100 points Problem Statement There a ...

  3. beta版验收互评

    排名 团队名称 项目名称 优点 缺点,bug 报告 1 别看了你没救了队 校园帮帮帮(已发布) 实现普通用户的登陆,修改个人信息,发布信息,下订单的功能:管理员登陆,修改个人信息,发布信息,下订单,增 ...

  4. Maven -Maven配置tomcat插件 两种

    Maven Tomcat插件现在主要有两个版本,tomcat-maven-plugin和tomcat7-maven-plugin,使用方式基本相同. tomcat-maven-plugin 插件官网: ...

  5. Odoo中连接mysql数据库

    how to integrate Odoo with MySQL - Stack Overflowhttps://stackoverflow.com/questions/31959919/how-to ...

  6. Failed while installing JAX-RS (REST Web Services) 1.1. org.osgi.service.prefs.BackingStoreException: Resource '/.settings' does not exist.

    https://issues.jboss.org/browse/JBIDE-10039?_sscc=t https://stackoverflow.com/questions/16836832/fai ...

  7. hive-site.xml

    https://cwiki.apache.org/confluence/display/Hive/AdminManual+MetastoreAdmin#AdminManualMetastoreAdmi ...

  8. CAS登陆过程UML中文版

    如果大家图片显示看不请,可以点击图片右键:在新窗口中打开图片,进行查看 名词解释 CASTGC:向cookie中添加该值的目的是当下次访问 认证中心 时,浏览器将Cookie中的TGC携带到服务器,服 ...

  9. 设计模式笔记:适配器模式(Adapter)

    1. 适配器模式简介 1.1 模式定义 适配器模式:通过一个类的接口转换成客户希望的另外一个接口,使原本由于接口不兼容而不能一起工作的那些类可以一起工作. 适配器从结构上分为:类适配器和对象适配器.其 ...

  10. DevexpressVCL v51

    Dev经典套件v49版 支持Delphi2010 DevExpress公司出品的Borland Delphi和C++ Builder的控件(包含完整源代码).ExpressVerticalGrid:就 ...