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的时候出现了一个问题: 单据是带有附件的,而且存在各种不同的格式,需要后台处理后给前台链接地址,点击预览,微信浏览器的特性就是只能存在一个浏览器窗口, 这 ...
随机推荐
- php boolean
要明确地将一个值转换成 boolean,用 (bool) 或者 (boolean) 来强制转换 var_dump((); // true 当转换为 boolean 时,以下值被认为是 FALSE: 1 ...
- Eclipse 安装Maven以及Eclipse配置Maven
安装Maven 1 下载 Downloading Apache Maven 3.5.0 选择 2 解压 3 配置环境变量 新建变量名:MAVEN_HOME 变量值:D:\SoftwareInstal ...
- react-native基础教程(1)
转载链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/ React ...
- selenium之关于 chromedriver的安装和使用
转自:https://blog.csdn.net/d77808675/article/details/79016271 最近在学习爬虫,用到了selenium 环境:Windows,python3 但 ...
- UnityEditor研究学习之EditorWindow
在unity使用过程中,其实我们都是在各个不同功能的Window下工作. 比如在Scene窗口中操作物体,在Inspector中操作物体属性,在Game视窗中观察游戏状态. 所以窗口是Unity的灵魂 ...
- [web前端] yarn和npm命令使用
原文地址: https://blog.csdn.net/mjzhang1993/article/details/70092902/ 最初接触 yarn 还是在 0.17.10 版本,由于各种各样的原因 ...
- 读懂isi get的结果
你想知道的一切,在这里: Isi Get & Set https://community.emc.com/community/products/isilon/blog/2018/02/21/i ...
- 当echarts的legend字数过多的时候变成省略号
legend: { data: ['国有土地使用','食品药品安全','生态环境和资源保护','国有财产保护'], orient: 'horizontal', left: '10', bottom:' ...
- 不依赖三方库从图像数据中获取宽高-gif、bmp、png、jepg
int extract_pic_info(const BYTE *pic, const uint32_t size, int &width, int &height) { ; widt ...
- eclipse core expression usage
http://codeandme.blogspot.com/2012/04/expression-examples.html We need to set checkEnabled on the vi ...