react中实现在js中内部跳转路由,有两种方法。

方法一:

  1. import PropTypes from 'prop-types';
  2. export default class Header extends Component {
  3. static contextTypes = {
  4. router: PropTypes.object.isRequired,
  5. }
  6. constructor(props) {
  7. super(props);
  8. this.state = {
  9. keyword:"",
  10. channelList:[]
  11. };
  12. this.handleToSearch=this.handleToSearch.bind(this);
  13. }
  14. handleToSearch() {
  15. if(this.state.keyword){
  16. this.context.router.history.push(`/news_list/search/${this.props.channelId}/${this.state.keyword}`)
  17. }
  18. }
  19. render() {
  20. return (
  21. <div className="wrapper">
  22. 小星星小星星
  23. </div>
  24. );
  25. }
  26. }

方法二:

  1. this.props.history.push('/download')

跳转到外链:

  1. window.location.href = 'https://你的url'

在页面中给一个按钮绑定绑定跳转,如果跳转到项目的路由,引入react-router的Link

使用<Link to="/download">下载</Link> 形式跳转,如果希望页面从新页面打开,加

  1. target="_blank"

如果跳转到一个外链,使用a标签,如果希望页面从新页面打开,除了加target,

  1. target="_blank"

还要加一个rel:

  1. <span><a href="https://internal.zhongwentoutiao.com/admin/news_list" target="_blank" rel="noopener noreferrer">管理员入口</a></span>

react跳转url,跳转外链,新页面打开页面的更多相关文章

  1. WordPress外链新窗口打开并使用php页面go跳转

    之前浏览别人的博客网站,打开外链时会有一个等待时间的代码,虽然不知道有什么用,但觉的挺有档次..今天正好看到教程,就自己也加上了,就复制粘贴些代码可以了 首先创建一个php文件,名字随便,如果你不想改 ...

  2. jQuery外链新窗口打开

    对于外链,为了留住用户在本站,我们通常会使用新窗口打开,你可以设置target="_blank".然而手动一个是麻烦,另一个则是有可能会遗漏,本文通过jQuery查询要点击的链接, ...

  3. html实现a元素href的URL链接自动刷新或新窗口打开

    有时我们想实现这样一个功能,点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口:如果这个链接没有打开过,则使用新窗口打开这个链接页面. 这是一个非常好的体验增强功能,可以有效避免浏览 ...

  4. react 在新窗口 打开页面

    遇到这个需求 首先通过 Link a去尝试直接跳转.发现2个问题 1.Link跳转 会自动进行登录校验,我设想是路由没有匹配到,去验证后大致排除了. 因为这个链接 直接粘贴到浏览器 是可以访问到的. ...

  5. 【转载】实现a元素href URL链接自动刷新或新窗口打开

    又是我偶像的新文,这个小技巧的用户体验真的非常非常棒! 文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu ...

  6. URL跳转与webview安全浅谈

    URL跳转与webview安全浅谈 我博客的两篇文章拼接在一起所以可能看起来有些乱 起因 在一次测试中我用burpsuite搜索了关键词url找到了某处url我测试了一下发现waf拦截了指向外域的请求 ...

  7. 二、ionic如何使用外链

    1.ionic如何使用外链并返回原有页面? html如下: 对应的controller如下: (function() { angular.module('app').controller('extra ...

  8. 小程序外链跳转web-view系列问题

    1.当小程序需要跳转外链时要上小程序后台配置业务域名,配置业务域名需要上传一个验证文件到你跳转的外链的服务器上的根目录里: 2. (1)第一种方法:.当小程序在同一个页面根据后台接口获取的url进行小 ...

  9. 【原创】Ionic单页应用跳转外链,构造路由返回的解决办法及代码

    在开发广汽菲克微信企业号的填单审批webApp的时候出现了一个问题: 单据是带有附件的,而且存在各种不同的格式,需要后台处理后给前台链接地址,点击预览,微信浏览器的特性就是只能存在一个浏览器窗口, 这 ...

随机推荐

  1. 【转载】IntelliJ IDEA 内存优化最佳实践

    本文转自 http://blog.oneapm.com/apm-tech/426.html [编者按]本文作者在和同事的一次讨论中发现,对 IntelliJ IDEA 内存采用不同的设置方案,会对 I ...

  2. 集合(1)—List接口的实现类ArrayList

    List List接口是Collection接口的子接口,从其名称可以看出,是一个元素有序(并不是按大小排序,具有顺序索引,类似于数组),默认按照元素的添加顺序设置元素的索引. List用法 List ...

  3. DirectUI消息循环的简单封装

      一.真窗体和假窗体 首先在DirectWindow内部创建一个真窗体(基于WTL),可以接收消息 class CMessageWindow : public CWindowImpl< CMe ...

  4. 关于Hook CreateMutex

    我是个驱动新手,最近学习破解多开.经过一个通宵的百度和摸索,简单的多开kugou用以下代码可以了. MyNtCreateMutant( OUT PHANDLE MutantHandle, IN ACC ...

  5. ASP.net的总结(一:理论理解)

    概述 这篇博客和之前博客有些重复的部分,如果要详细了解相应部分内容,可以到相应连接博客中查看.本篇博客主要介绍了什么是ASP.net,ASP.net在浏览器和服务器端的交互过程,ASP.net服务器端 ...

  6. 在DevExpress程序中使用内置的图标构建美观的界面元素【转】

    https://www.cnblogs.com/wuhuacong/p/6217012.html 在我们一般的程序中,为一般的界面元素添加一定的图标展示,有助于提升界面的整体的美观.结合排版布局,以及 ...

  7. Android APK 打包过程 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  8. 微软BI 之SSRS 系列 - 如何让报表在一页显示,两种常用的技巧

    通常情况下,SSRS 报表在页面内容过多的时候会自动分页.但有的时候当页面内容不是很多,大概最多2页的情况下,或者客户要求所有内容必须在一页显示时,应该如何设置. 实际上,要考虑两种情况:第一种情况是 ...

  9. hustoj升级

     sudo su  svn up hustoj-read-only cd hustoj-read-only cd core sudo ./make.sh 有冲突 全部回答r http://www.hu ...

  10. Atlas+Keepalived系列一:安装Atlas:

    1:下载Atlas https://github.com/Qihoo360/Atlas/releases/download/2.2.1/Atlas-2.2.1.el6.x86_64.rpm 2:安装A ...