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. java参数转换为javaBean对象

    package com.tuxin.tool.json; import flexjson.JSONDeserializer;import flexjson.JSONSerializer;import ...

  2. C++学习笔记42:进程管理

    子进程异步清除 SIGCHLD信号:子进程终止时,向父进程自动发送,编写此信号处理例程,异步清除子进程 #include <signal.h> #include <string.h& ...

  3. php boolean

    要明确地将一个值转换成 boolean,用 (bool) 或者 (boolean) 来强制转换 var_dump((); // true 当转换为 boolean 时,以下值被认为是 FALSE: 1 ...

  4. QT.Qt qmake报错(TypeError: Property 'asciify' of object Core::Internal::UtilsJsExtension)

    出错信息 打开左边的"项目" 把右侧的"构建目录"修改成你项目所在的文件夹 再次运行试试 成功!

  5. C# 8.0的新的using语法——Using declarations

    我们在代码中经常使用using保障非托管资源的释放 static void Main(string[] args) { using (var options = Parse(args)) { if ( ...

  6. DO-214 SMA、SMB、SMC封装

    DO-214 is a standard that specifies a group of semiconductor packages for surface mounted diodes. Th ...

  7. ASP.NET Web API中通过URI显示实体中的部分字段

    有时候我们可能不想显示某个实体中的所有字段.比如客户端发出如下请求: locaohost:43321/api/groups/1/items?fields=idlocaohost:43321/api/g ...

  8. SpringMVC加载配置Properties文件的几种方式

    最近开发的项目使用了SpringMVC的框架,用下来感觉SpringMVC的代码实现的非常优雅,功能也非常强大, 网上介绍Controller参数绑定.URL映射的文章都很多了,写这篇博客主要总结一下 ...

  9. .hashCode方法的作用

    对于包含容器类型的程序设计语言来说,基本上都会涉及到hashCode.在Java中也一样,hashCode方法的主要作用是为了配合基于散列的集合一起正常运行,这样的散列集合包括HashSet.Hash ...

  10. Convolutional Neural Networks: Step by Step

    Andrew Ng deeplearning courese-4:Convolutional Neural Network Convolutional Neural Networks: Step by ...