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

方法一:

import PropTypes from 'prop-types';
export default class Header extends Component {
static contextTypes = {
router: PropTypes.object.isRequired,
}
constructor(props) {
super(props);
this.state = {
keyword:"",
channelList:[]
};
this.handleToSearch=this.handleToSearch.bind(this);
}
handleToSearch() {
if(this.state.keyword){
this.context.router.history.push(`/news_list/search/${this.props.channelId}/${this.state.keyword}`)
}
}
render() {
return (
<div className="wrapper">
小星星小星星
</div>
);
}
}

方法二:

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

跳转到外链:

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

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

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

 target="_blank"

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

 target="_blank"

还要加一个rel:

<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. Postman使用记录

    1. 情况: 当 本地需要测试,线上的项目也需要同时测试时,地址了输入还需要打开多个窗口,麻烦 点击圆圈部分 testForm是我新建的 输入请求的action名字 点击齿轮按钮: 地址栏填入方式: ...

  2. 【数据结构与算法】自己动手实现图的BFS和DFS(附完整源码)

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/19617187 图的存储结构 本文的重点在于图的深度优先搜索(DFS)和广度优先搜索(BFS ...

  3. Linux 下 make 命令 及 make 笔记

    Linux 下 make 命令是系统管理员和程序员用的最频繁的命令之一.管理员用它通过命令行来编译和安装很多开源的工具,程序员用它来管理他们大型复杂的项目编译问题.本文我们将用一些实例来讨论 make ...

  4. BZOJ3861 : Tree

    把集合看成左边的点,图中的点看成右边的点,若集合$i$不包含$j$,则连边$i->j$,得到一个二分图,等价于求这个二分图的完备匹配个数. 设$f[i][j]$表示考虑了前$i$个集合,匹配了$ ...

  5. android:ViewHolder模式

    ViewHolder holder = null; if(convertView == null){ convertView = mInflater.inflate(R.layout.xxx null ...

  6. Android Studio下添加assets目录

    Android Studio下添加assets目录 分类: Android Studio2013-11-06 18:09 10872人阅读 评论(2) 收藏 举报 android studioasse ...

  7. Bootstrap 标签页(Tab)插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  8. weex开发错误汇总

    weex run serve 报UglifyJS错 ANDROID_HOME环境变量 weex build android需要ANDROID_HOME, 请配置 D:\adt-windows-x86_ ...

  9. mysql函数和操作符

    mysql,); //取模函数 +-----------+ ,) | +-----------+ | +-----------+ row in set (0.00 sec) mysql,); +--- ...

  10. iOS 几种加密方法

    iOS常见的几种加密方法 普通加密方法是讲密码进行加密后保存到用户偏好设置中 钥匙串是以明文形式保存,但是不知道存放的具体位置 1.base64加密 base64 编码是现代密码学的基础 基本原理: ...