react跳转url,跳转外链,新页面打开页面
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,跳转外链,新页面打开页面的更多相关文章
- WordPress外链新窗口打开并使用php页面go跳转
之前浏览别人的博客网站,打开外链时会有一个等待时间的代码,虽然不知道有什么用,但觉的挺有档次..今天正好看到教程,就自己也加上了,就复制粘贴些代码可以了 首先创建一个php文件,名字随便,如果你不想改 ...
- jQuery外链新窗口打开
对于外链,为了留住用户在本站,我们通常会使用新窗口打开,你可以设置target="_blank".然而手动一个是麻烦,另一个则是有可能会遗漏,本文通过jQuery查询要点击的链接, ...
- html实现a元素href的URL链接自动刷新或新窗口打开
有时我们想实现这样一个功能,点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口:如果这个链接没有打开过,则使用新窗口打开这个链接页面. 这是一个非常好的体验增强功能,可以有效避免浏览 ...
- react 在新窗口 打开页面
遇到这个需求 首先通过 Link a去尝试直接跳转.发现2个问题 1.Link跳转 会自动进行登录校验,我设想是路由没有匹配到,去验证后大致排除了. 因为这个链接 直接粘贴到浏览器 是可以访问到的. ...
- 【转载】实现a元素href URL链接自动刷新或新窗口打开
又是我偶像的新文,这个小技巧的用户体验真的非常非常棒! 文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu ...
- URL跳转与webview安全浅谈
URL跳转与webview安全浅谈 我博客的两篇文章拼接在一起所以可能看起来有些乱 起因 在一次测试中我用burpsuite搜索了关键词url找到了某处url我测试了一下发现waf拦截了指向外域的请求 ...
- 二、ionic如何使用外链
1.ionic如何使用外链并返回原有页面? html如下: 对应的controller如下: (function() { angular.module('app').controller('extra ...
- 小程序外链跳转web-view系列问题
1.当小程序需要跳转外链时要上小程序后台配置业务域名,配置业务域名需要上传一个验证文件到你跳转的外链的服务器上的根目录里: 2. (1)第一种方法:.当小程序在同一个页面根据后台接口获取的url进行小 ...
- 【原创】Ionic单页应用跳转外链,构造路由返回的解决办法及代码
在开发广汽菲克微信企业号的填单审批webApp的时候出现了一个问题: 单据是带有附件的,而且存在各种不同的格式,需要后台处理后给前台链接地址,点击预览,微信浏览器的特性就是只能存在一个浏览器窗口, 这 ...
随机推荐
- [模板][P3377]左偏树
Description: 一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或第y个数已经被删除或第x和第y个数 ...
- Minor GC 与Full GC有什么不一样
新生代GC(Minor GC):指发生在新生代的垃圾收集动作,因为java对象大多都具备朝生夕灭的特性,所以Minor GC非常频繁,一般回收速度也非常快 老年代GC(Major GC/Full GC ...
- Unity脚本-Rotate旋转相关知识点
1,Transform旋转 transform.Rotate(X, Y, Z);//分别绕X,Y,Z轴旋转,可写为绕某个轴旋转,栗子transform.Rotate(0, 90, 0); tr ...
- UDP中使用bind和connect的作用
1:UDP中可以使用connect系统调用 2:UDP中connect操作与TCP中connect操作有着本质区别. TCP中调用connect会引起三次握手,client与server建立连结.UD ...
- [c#基础]ICloneable接口
摘要 该接口使你能够创建现有对象的副本的自定义的实现.该接口只提供了,一个Clone方法,实现对象的浅拷贝.有浅拷贝,那么就有相对应的深拷贝.但该接口并没有对我们提供,需要我们自己实现. 什么是浅拷贝 ...
- Axure RP Pro 7.0苏宁易购式标签切换效果教程
转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: ...
- 【docker】docker限制日志文件大小的方法+查看日志文件的方法
一.docker日志文件的方法 除了 docker logs -f 容器ID/容器名 这个方法以外. 在linux上,一般docker的日志文件存储在/var/lib/docker/container ...
- IntentService 服务 工作线程 stopself MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Spring AOP获取拦截方法的参数名称跟参数值
注意:这种方式需要JDK1.8版本支持 开始:http://www.cnblogs.com/wing7319/p/9592184.html 1.aop配置: <aop:aspectj-autop ...
- C# System.Threading.ReaderWriterLockSlim
using System; using System.Threading; using System.Threading.Tasks; using System.Collections.Generic ...