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. c/c++中int main(int argc,char *argv[])的具体含义

    int main(int argc,char * argv[ ]) argv为指针的指针 argc为整数 char **argv or: char *argv[ ] or: char argv[ ][ ...

  2. ios多target开发

    链接: ios开发时,在Xcode中添加多个targets进行版本控制 如何在iOS项目中创建多个target 多个Target的使用 iOS开发中如何创建多个target

  3. JDBC(2)—Statement

    介绍: 获取到数据库连接之后,就可以对数据库进行一些增.删.改操作,但是却不能进行查询操作. 增删改操作是程序到数据库的一个操作过程,但是查询是程序到数据库--数据库返回到程序的一个过程. 步骤: 步 ...

  4. java程序中实现打开 某个指定浏览器

    package com.test; import java.lang.reflect.Method; //实现打开浏览器并跳到指定网址的类 public class BareBonesBrowserL ...

  5. javascript删除数组,索引出现问题解决办法。

    var data = [ { isRemove: 0, name: "项目1" }, { isRemove: 1, name: "项目2" }, { isRem ...

  6. 解决MySQL8.0报错:Unknown system variable 'validate_password_policy'

    一.问题描述 1.在安装MySQL8.0时,修改临时密码,因密码过于简单(如:123456),不符合MySQL密码规范,会触发一个报错信息: ERROR 1819 (HY000): Your pass ...

  7. android开发之打包签名

    android开发之数字签名 http://www.cnblogs.com/fengzhblog/archive/2013/05/06/3063104.html Android系统要求所有的程序经过数 ...

  8. 如何查看Apache的连接数和当前连接数

    查看Apache的连接数和当前的连接数以及IP访问次数,下面有个不错的示例,大家可以参考下,希望对大家解决问题有所帮助 查看了连接数和当前的连接数 复制代码 代码如下: netstat -ant | ...

  9. 【转载】Mysql load data infile用法(万级数据导入,在几秒之内)

    https://blog.csdn.net/u014082714/article/details/53173975 http://blog.itpub.net/26506993/viewspace-2 ...

  10. [svc]mysql备份恢复及常用命令

    如何实现mysql读写分离 1.通过程序实现读写分类(性能 效率最佳) php和java都可以通过设置多个连接文件轻松实现对db的读写分离,即当select时,就去连读库的连接文件,当update,i ...